Showing posts with label tutorial blogspot. Show all posts
Showing posts with label tutorial blogspot. Show all posts

Home » Posts filed under tutorial blogspot

Trik Membuat Menu Multi Kolom

Membuat menu multi kolom disini maksudnya adalah membuat lebih dari satu menu dalam satu kolom, ini berguna sekali untuk menghemat space blog anda yang sudah memiliki menu yang banyak seperti pada contoh screenshot berikut:



Langkah-langkah untuk membuat menu multi kolom silahkah ikuti seperti dibawah ini:
1. Login ke blogger anda
2. Layout-->Edit HTML
3. Kemudian cari kode ]]></b:skin>
4. Masukan kode dibawah ini sebelum kode diatas



div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E;
overflow: hidden;
background-color: #FF9900;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
Keterangan :

- Angka yang berwarna merah-->lebar kotak menu utama
- Angka yang berwarna biru--> tinggi kotak menu utama
- Kode yang berwarna hijau--> warna border menu utama
- Kode yang berwarna ungu-->warna Font menu utama
- Kode yang berwarna abu-abu-->Warna background menu utama
- Kode yang berwarna kuning-->Warna border kotak utama
- Kode yang berwana orange-->warna background kotak utama
5. Silahkan masukkan kode dibawah ini sebelum kode <head>
<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6. Kemudian Save

Kemudian ke menu Layout-->Page Elements-->pilih Add Gadget yang akan kamu tempatkan menu multi kolom ini-->HTML/Javascript

Silahkan masukkan script menu multi kolom dibawah ini:

<form action="tabview.html" method="get">


<div class="TabView" id="TabView">


<div class="Tabs" style="width: 350px;">


<a>Title menu 1</a>
<a>Title menu 2</a>
<a>Title menu 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">



<div class="Page">


<div class="Pad">


Link 1 di menu 1
Link 2 di menu 1
Link 3 d1 menu 1
</div>
</div>
<div class="Page">


<div class="Pad">


Link 1 di menu 2
Link 2 di menu 2
Link 3 d1 menu 2
</div>
</div>
<div class="Page">


<div class="Pad">


Link 1 di menu 3
Link 2 di menu 3
Link 3 d1 menu 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Keterangan
- kode yang berwarna hijau adalah title menu anda
- kode yang berwarna biru adalah lebar dan tinggi menu multi kolom
- kode yang berwarna merah adalah isi dari menu andaPage Elements-->pilih Add Gadget yang akan kamu tempatkan menu multi kolom ini-->HTML/Javascript Silahkan masukkan script menu multi kolom dibawah ini:

-->

Cara Menampilkan Avatar di Komentar Blogspot

Menampilkan avatar foto dalam komentar blogger akan menambah variasi yang bagus pada komentar blogspot yang semula biasa aja dengan menampilkan image pengunjung yang berko mentar pada blog anda.


cara menampilkan image avatar pada blogspot:
1.masuk dalam dashbord blogger Pengaturan> Komentar> dan mengaktifkan "Tampilkan gambar profil dalam komentar"
2.Jika template anda normal maka avatar image akan melihat di komentar blog anda
3.Jika template anda kustom maka anda harus menambahkan script kode pada html template anda.
4.Blogger Layout> Edit HTML dan backup template Anda.
5.Cari kode berikut

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

kalo tidak ada anda bisa mencari kode

<dl id='comments-block'>

dan gantikan dengan kode dibawah ini

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

6.Kemudian carilah kode

lt;a expr:name='data:comment.anchorName'/>

dan gantikan dengan kode

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

mudah-mudahan bisa membantu

Cara Buat Label Tag Cloud Animasi

Tag Cloud dengan animasi sebuah acsesories blog yang sangat menarik untuk label blogspot,dengan cara aplikasi mudah tentu saja akan mempercancik tampilan blogspot,untuk cara membuatnya ikuti cara dibawah ini:


1. Masuk Blogger.com
2. Pilih Rancangan
3. Pilih Edit HTML
4. Untuk berjaga-jaga barangkali ada kesalahan alangkah baiknya jika kamu membackup template kamu terlebih dahulu.
5. Kemudian cari kode yang mirip seperti dibawah ini :

<b:section class='sidebar' id='sidebar' preferred='yes'>

6. Copy lalu paste kode di bawah ini di bawah kode yang tadi :

<b:widget id="Label99" locked="false" title="Labels" type="Label">
<b:includable id="main">
<b:if cond="data:title">
<h2><data:title></data:title></h2>
</b:if>
<div class="widget-content">
<script src="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js" type="text/javascript"><br /><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><br /><script type="'text/javascript'"><br />var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);<br />// uncomment next line to enable transparency<br />//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);<br />so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);<br />so.addVariable(&quot;mode&quot;, &quot;tags&quot;);<br />so.addVariable(&quot;distr&quot;, &quot;true&quot;);<br />so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);<br />so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values="'data:labels'" var="'label'"><a href="'data:label.url'" style="'12'"><data:label.name/></a></b:loop></tags>&quot;);<br />so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);<br />so.write(&quot;flashcontent&quot;);<br /></script>
<b:include name="quickedit">
</b:include></div>
</b:includable>
</b:widget>

catatan :
* Width="240" adalah lebar Widget, sebainknya ganti dengan 100% agar sesuai dengan sidebar blog kamu.
* Height="000" adalah tinggi widget.
* 7 = ukuran font
* "bgcolor" value="#ffffff" adalah warna background, untuk melihat kode warna silakan klik disini



7. Klik Pratinjau untuk melihat hasilnya.
8. Setelah berhasil tinggal klik simpan.


Jika gagal silakan ganti kode yg berwarna merah dgn kode : http://stashbox.org/921310/MasterCumulus-bgs1-GR.js Klik Partinjau untuk melihat hasilnya....! Jika masih gagal silakan ganti kode yang berwarna biru dgn kode :

http://up2share.com/file/986bdff61_tagcloud_gubhug-reyot.swf
contoh lihat disini

Cara Cepat Daftar FeedBurner

Sebelum kita mendaftar blog ke FeedBurner kita harus mengerti dulu apa itu RSS feed. Feed merupakan jalan untuk mendaftarkan diri ke Google Webmaster Tools karena crawder bot, robot Google yang mengindeks situs/blog membutuhkan feed sebagai perantara. RSS Feed juga berguna bagi anda yang senag mengoleksi artikel-artikel dari website favorit anda tanpa harus mengunjungi web tersebut. RSS bukan hanya memberikan keuntungan bagi pembaca, tapi juga bagi pemilik website atau blog. Dengan mendaftarkan URL blog pada RSS Feed akan membuka kesempatan bagi blog kita untuk lebih mudah ditemukan oleh pengguna internet.

FeedBurner adalah website penyedia layanan RSS (”Really Simple Syndication”) Feed yang paling dipercaya saat ini. Dan keberadaannya sekarang telah diakuisisi oleh Google. Lalu bagaimana cara kita mendaftarkan blog ke FeedBurner? ikuti saja langkah dibawah ini:

* Tanpa basa basi silahkan meluncur ke http://www.feedburner.com
* Klik register pada menu bagian atas
* Isi semua fom yang disediakan
* Jika semuanya sudah lengkap, klik sign up.
* Akan muncul ucapan welcome dari FeedBurner
* Isilah kotak yang ada di bawah tulisan Burn a feed right this instant dengan URL blog sobat. Contoh : http://goblogtutorial.blogspot.com/
* Beri tanda pada radio button yang anda inginkan, lalu klik Next
* Ubah Feed Title dengan Feed Address jika mau di ubah, kalo sudah tinggal klik tombol Active Feed
* akan muncul ucapan conrats, kemudian klik Next
* Beri tanda centang pada kotak disamping tulisan Clickthroughs dan I wont more ! have FeedBurner stats PRO also track
* klik tombol Next
* Klik tab Optimize
* Silahkan setting sesuai yang sobat inginkan, tapi yang paling penting adalah kita harus mengaktifkan fitur SmartFeed supaya fungsi dari feed kita bisa kompatibel dengan berbagai feed yang ada.
* Silahkan klik SmartFeed lalu klik tombil Active
* Klik tab Publize, silahkan pilih fitur yang diinginkan, tapi saya sarankan memilih fitur FeedCount, klik FeedCount
* Pilih bentuk style dari FeedCount, yang biasa atau yang animasi, klik radio buton yang ada disampingnya
* Klik tombol Active
* Copy kode HTML yang diberikan pada text area, paste ke notepad untuk nanti dipasang di blog
* Klik Chicklet Chooser untuk memilih berbagai banner atau chicklet
* Beri tanda pada radio button yang terletak di samping chicklet masing-masing, kemudian copy kode HTML yang di berikan yang ada pada text area, kemudian paste pada notepad. catatan : setiap sobat memberi tanda pada radio button masing-masing chicklet, maka secara otomatis kode HTML yang ada di bagian bawahpun akan berubah, jadi kesimpulannya beri tanda radio button lalu copy kode HTML nya beri tanda lagi lalu copy kodenya lagi.
* klik Pingshot, beri tanda pada kotak disamping Ping-O-matic serta Newsgator, klik menu drpdown yang ada, lalu pilih yang sobat inginkan, klik tombol Add, klik lagi menu dropdownnya bila ingin ditambahkan lagi, klik Add kembali
* Klik tombol Active
* Klik Headline Animator untuk mendapatkan banner animasi
* Klik menu dropdown di bawah tulisan Theme, pilih yang sobat suka (yang paling banyak digemari adalah type classic)
* Klik tombol Active
* klik menu dropdown disamping tulisan Add to, pilih Blogger Blog
* klik tombol Next
* Setelah muncul pop-up window, klik tombol Add to Blogger
* Silahkan Sign in dulu ke blogger
* Pilih blog yang mau dipasang banner animasinya, lalu klik tombol Menambah Widget, maka secara otomatis banner animasi akan ditambahkan (khusus untuk templet baru)
* Selesai.