Pages

Showing posts with label Blog. Show all posts
Showing posts with label Blog. Show all posts

26 April 2014

Cara Membuat Tag Cloud Berputar di Blog



Ingin tampil beda Setelah mencari-cari akhirnya dapat juga tutorial cara membuat tag cloud berputar di blog, atau label berputar. bisa lihat hasil cara membuat label berputar pada ini.


Note:
Tidak semua template dapat mendukung untuk tag cloud ini. Dan sebelum membuat label berputar ini,     diharapkan untuk mendownload templatenya masing-masing. 

Berikut caranya:

1. Login ke  blogspot
2.  Download terlebih dahulu template masing-masing,
3.  Klik Design/Rancangan >> Edit HTML >> Centang Expand Templates Widget,
4. Cari kode : <b:section class='sidebar' id='sidebar' preferred='yes'>
   ( kalau mau lebih cepat nyarinya pakai F3 aja)
5. Lalu copy paste kode di bawah ini tepat berada di bawah kode tadi no.4,


<b:widget id='Label99' locked='false' title='Tag Cloud Comulus Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


 5. Sebelum klik button save, alangkah baiknya untuk priview terlebih dahulu, untuk melihat berhasil atau tidaknya kode tag tersebut. 

CATATAN
1. Warna Merah : Ganti untuk merubah ukuran tag cloud
2. Warna Hijau : Ganti untuk merubah warna background tag cloud
3. Warna Hitam : Ganti untuk merubah ukuran font
4. Tag Cloud akan berjalan apabila komputer sudah terinstal adobe flash player.

 Semoga berhasil !!!!...

(^_^) Semoga Bermanfaat ya.... 
READ MORE →
Diposkan oleh di No comments:
Label:

Membuat Salju Berjatuhan di Blog



membuat butiran-butiran salju berjatuhan di blog???? keren juga ya
postingan kali ini akan berbagi membuat/ menghiasi blog kita agar lebih terlihat lembut seperti salju,
efek ini mungkin sangat sulit dari kelihatanya, tapi ternyata tidak
disamping mudah efek ini pun tidak akan membuat membuat blog menjadi berantakan karna hanya menyisipkan script sedikit saja pada bagian head.

Berikut caranya:
  1. Seperti biasa Login ke akun blogger sobat
  2. Setelah itu pilih opsi lainya>>Template>>Edit HTML>>Lanjutkan
  3. Jangan lupa untuk mencentang Expand Template Widget
  4. cari kode </head>,gunakan Ctrl+F untuk mempermudah

  5.
    <script src='http://misbahudin-dcaesga.googlecode.com/files/efek-salju.js'/> 
  6.  kopas kode no. 5 tersebut di atas kode </head>
  7. Sebelum klik button save, alangkah baiknya untuk priview terlebih dahulu, untuk melihat berhasil atau tidaknya kode tersebut. 
  8. Lalu save tamplate setelah semua berhasil.
Semoga berhasil !!!!...

 (^_^) Semoga Bermanfaat ya.... 
READ MORE →
Diposkan oleh di No comments:
Label:

Membuat Burung Twitter Terbang di Blog



kecantikan blog tidak bisa ditutupi untuk menarik pengunjung terutama dalam persahatan melalui ikon berbentuk hewan terbang ini, 
pada posting kali ini akan berbagi cara Membuat Burung Twitter Terbang di Blog

Berikut caranya:
  1. Login ke akun blogger sobat
  2. Kemudian pilih"Opsi Lainya">>Tata Letak>>Tambah Gadget>>HTML/JavaScript
  3. Masukkan kode dibawah ini kedalamnya

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://misbahudin-dcaesga.googlecode.com/files/twitter-terbang.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyH_BYQ1_Gn8kM2RqjN9xlJ08X6QLYt9l2pmjJk4bBicRJYOoCFqXtLVF4c2QlqR-ntR7QsUqSuBo9Lg9TBQGYaS0XZ5VMr5eQBLA-5cjCHbJrpM4e0nAQ0xwWJEDScdrFki7BzbTORB4/s1600/cyan+bird.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3",
"h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/#!/misbahudin8";
var tweetThisText = "Twitter - UserID http://planktoon.blogspot.com/";
tripleflapInit();
</script>

Catatan:
Ganti yang berwarna merah dengan ID Twitter masing-masing, 
dan untuk yang berwarna biru ganti dengan URL blog masing-masing.
   
4.Kalo sudah jangan lupa di"Save"ya sob. 

 NB: Kode yang berwarna hijau adalah warna burung twitter yang diinginkan. ganti URL gambar dibawah ini jika ingin mengganti warna burung yang dipilih.


  • Burung Twitter hijau
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwOlPb-DHfcTpIKfinM7F5v36oAxRDpS2a9p3zRwZ7iCS8amqRo75SNh2X9fkQMnpJSbwWPEmrmCUa-cNSok2mmcVBONC5G2HZUbCbrFGBcNaItKr_9Lm7PVOfcSwobfxQU9l1ypOhcgg/s1600/Green+bird.png

  • Burung Twitter hitam
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU8C34-GvnhNbzIlU9E2SNUF9Pb_WtG9MtZLp71T7nu9SRntr7Nqkw8sBUxqX6zIndLQ60WK5d9med93hd5nIklr_4DPHeQSLrPT_z3b2HA8qp1L1Bmen255xpL4wMBE9uOg8OWSHgEj0/s1600/black+bird.png 

  • Burung Twitter coklat
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIc97o5qowWPkQ2-ibqvWoWt75NNIQPsVFBZNQdO6HRGssDiCpBVEpM1BvVZOnFXKUHDeK8gpKgnE-Nym5KiK7tQR-fKM0zwy1yXq20xf5Ylyzs5RLHo4JKqG32jQvDK_Rrvo7aM-HwLk/s1600/brown+bird.png 
  • Burung Twitter  ungu
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBZpRF0gD-lGTJaQMq2TgeCfpOSNqYXqB4fOWr5192B2OpYAQm5E6JBHEYOKsE5Q-bUZN62VkJEoi9-70gFFfxFO_y5WbRA5DkNR53NUExOXO96yhxgu0e55VdWFyzqCHx-unoUNQ4UyA/s1600/purple+bird.png 
  • Burung Twitter merah
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXh_Wmpe5nSci3bdWOpqYnB48FwUM2QULjKEzYkR2V-SQo_pdCjj-14MAFukMhP4cu2JGwVe7SRlCdp1l9FGpLHtg_ASVMFMrGVVWbabcgLJcx7E0KIAiT3pE0l1zFQgvSyz3QrFi1EFM/s1600/red+bird.png 
  • Burung Twitter putih
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFqcpvHZiM0x30P8s3zB-MCBZ0KspQ13dSf413jHmXWpSHBZYzr-P4k8UVPhii7j09orl6_a1NMFT1iO7uxsQx8EkVTw0lgEBlbH8UG1e-KED0oCA7weI70Z-h9FALYpJkHOQMMw1JTec/s1600/white+bird.png 
  • Burung Twitter kuning
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJm3A6v36bbgNDnvPz8zb_011WsTI1qunq96t6M1qfJOPDYUcXhDV27EtsbBGtbAbzQyDKQG3U8khNhViHvFQclMJSHyUG9vzZnIdrSOz1rtvK8BGiVzM1cqO4S1JtYN-VJBIAFPe8_t0/s1600/yellow+bird.png 

ingin tampil beda???? 
untuk lebih kreatif, coba gambarnya edit menggunakan software grafik design atau lainnya.
(^_^) Semoga Bermanfaat ya.... 
READ MORE →
Diposkan oleh di No comments:
Label:

16 March 2014

Cara membuat menu dropdown di blogspot

Cara membuat menu dropdown di blogspot - Rasanya kurang indah jika blog kita tidak memiliki menu dropdown. selain sebagai salah satu usaha cara kita untuk mempercantik sebuah blog dan dengan adanya tab menu pada blog kita, maka akan lebih memudahkan pengunjung dalam mencari topik pembahasan yang ada pada blog kita. 


untuk langkah-langkahnya sebagai berikut:

Cara membuat menu dropdown di blogspot

Sebelum kita memulai membuat menu dropdown di bawah header blogspot alangkah baiknya backup dulu template yang sedang dipakai, karena ditakutkan terjadi hal-hal yang tidak di inginkan.

1. Masuk ke akun blogger -> klik Template -> Edit HTML
2. Centang “Expand Widget Templates ”
3. Lalu agan cari kode ]]></b:skin> ( gunakan Ctrl + F untuk memudahkan proses pencarian ) 
4. Terus taruh script di bawah ini tepat diatas kode ]]></b:skin>

#catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBTWTMJfYlDuPJR2RBXFcLTH9zrBkKlxmr3G76jBGPLjsU2J2E_E60H8RrBDYnm5GxAwekJ14DKqQ3Cjspyr8horO5wNaCKPAqxdU6gI-kJvxO8hBMmzJAVXEh4Y0QyDHQgcLenvqrtbl3/s1600/2.gif) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}
#catmenu{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYhnni292_I30Q6GMWuFCKr95CNRE4RNdo671QkNcp2tCxzhnNPAQzeQnXqlEAh3jFaoZlcDYC0bfJM58Cs01sxocyC9-S8GmVd6nT0Tj1Bjj4JXiVVMJfx04DXaUOriSqVUuQ0rAfykle/) repeat-x;
height:33px;
}

#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#catmenu li a:hover, #catmenu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrzVQ_3P5DecIThckWgk75o9P7KPo21tdaQ9zAbbvjqbCwVKNjaCkK_nF0hj6YrJxKQfevAPByg9Oo95sTIsHwwVvUGaelimpaBnZODCAvmcO2nDO8wvV0k1xwSYCQEkCtMoVdflXGbWaf/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;

}

#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrzVQ_3P5DecIThckWgk75o9P7KPo21tdaQ9zAbbvjqbCwVKNjaCkK_nF0hj6YrJxKQfevAPByg9Oo95sTIsHwwVvUGaelimpaBnZODCAvmcO2nDO8wvV0k1xwSYCQEkCtMoVdflXGbWaf/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}

#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#catmenu li li {
}

#catmenu li ul a {
width: 140px;
}

#catmenu li ul a:hover, #catmenu li ul a:active {
}

#catmenu li ul ul {
margin: -34px 0 0 170px;
}

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}

#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}

#catmenu li:hover, #catmenu li.sfhover {
position: static;
}

5. Kemudian agan cari kode  <div id='content-wrapper'> 
6. Copy kode dibawah ini dan paste tepat dibawah kode <div id='content-wrapper'>
Ket : Jika kode <div id='content-wrapper'> tidak ada dalam template, itu berarti cara ini tidak sesuai dengan template yang sedang gunakan. Tetapi  masih bisa memasangnya dengan cara :
Masuk -> Elemen Laman -> Tambah Gadget -> pilih HTML/JavaScript >> taruh kode script yang ke-2 dibawah ini di dalam nya. Klik Simpan dan lihat hasilnya. 

<div id='catmenucontainer'>
<div id='catmenu'>
<ul>
<li><a href='http://NAMA LINK BLOG ANDA/'>Home</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>
</ul>
</div>
</div>
<div class='clear'/>
7. Klik Pratinjau/Preview terlebih dulu sebelum di SAVE template nya, jika sudah berhasil maka klik Save/Simpan. 

Note:
- Edit Your-Link-Here,Link-Title, dan Link-Name. Ganti dengan link dan title link yang agan inginkan.

Itulah tutorial Cara membuat menu dropdown di blogspot

 Selamat Belajar!
Semoga Bermanfaat 
^_^


READ MORE →
Diposkan oleh di No comments:
Label:
Subscribe to: Posts (Atom)