Catatan Belajar Dari Kendawangan

  • RSS
  • Delicious
  • Facebook
  • Twitter
  • Vestibulum quis diam velit, vitae euismod ipsum

    Etiam tincidunt lobortis massa et tincidunt. Vivamus commodo feugiat turpis, in pulvinar felis elementum vel. Vivamus mollis tempus odio, ac imperdiet enim adipiscing non. Nunc iaculis sapien at felis posuere at posuere massa pellentesque. Suspendisse a viverra tellus. Nam ut arcu et leo rutrum porttitor. Integer ut nulla eu magna adipiscing ornare. Vestibulum quis diam velit, vitae euismod ipsum? Quisque ...

Twitter

Showing posts with label BELAJAR BLOGGER. Show all posts

Kemarin kita belajar Membuat Widget dibawah Posting menjadi dua kolom hasil karya Kang Rohman dan kali ini masih tentang ilmu yang diberian oleh kang rohman, bagaimana kita bisa dengan Mudahnya Membuat Widget dibawah Posting yang saya coba terapkan pada blog ini yang tampilan screen shootnya sobat bisa lihat dibawah ini ::

Sebagai Catatan pembelajaran makanya saya posting kembali prosesnya :

 MUDAHNYA MEMBUAT WIDGET DIBAWAH POSTING
1. Login ke blogger dengan ID ANDA
2. Klik Tata Letak
3. Klik Tab Edit HTML
4. Klik kotak kecil disamping tulisan Expand Widget Template.
expand
5. Silahkan cari  kode ini :  ]]></b:skin> kemudian copy paste kode di bawah ini persis diatasnya ingat diatasnya.
.bawahpost{
padding:10px;
margin:10px 0px;
background:#e1f2ff;
border:1px solid #ddd;
line-height:1.6em;
}
6. Kemudian Cari kode <data:post.body/> Lalu copy paste kode dibawah ini :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='bawahpost'>
ISI DENGAN KODE IKLAN / APAPUN YANG  ANDA INGINKAN
</div>
</b:if>
 7.  Klik tombol SIMPAN TEMPLATE.
8. S E  L E S A I


Dan hasilnya bisa sobat lihat dibawah artikel ini lumayan  cantik disitu saya tambahkan tombol share dan like dari alpha Link. Semoga bermanfaat nantinya.

Setelah kemaren kita belajar  Membuat Link di Sorot Ada Keterangannya tentunya tampilan blog kita lebih cantik dari sebelumnya dan rasanya belum puas akan tampilan tersebut makanya kita  jalan - jalan lagi  ke Blognya kang Rohman dan sebagai salah satu masternya dibidang blogger blognya itu sangat membantu dan menginspirasi blog ini, selain itu, disitu juga dijelaskan bagaimana cara membuat Membuat Widget dibawah Posting menjadi dua kolom itu.
Sebagai napak tilas saja bagaimana cara membuat Membuat Widget dibawah Posting menjadi dua kolom itu makanya ini kembali saya tulis dalam sebuah posting sebagai pembelajaran saya sendiri nantinya.
Sebenarnya  cara mengatur tata letak kolom-kolom tersebut kang rohman menggunakan kode CSS. Dimana dengan kode CSS tersebut beliau mengatur lebar kolom, warna dasar kolom dan lain-lain. Disini  kang Rohman mencontohkan dengan pemanggilan CSS dengan kolom Utama dengan kolom kiri  dinamakan bawahkiri sedangkan kolom kanan diberinya nama bawahkanan. (lebih jelasnya perhatikan gambar sisamping)

LANGKAH MEMBUAT WIDGET DIBAWAH POSTING MENJADI DUA (2) KOLOM

1. Login ke blogger dengan ID ANDA
2. Klik Tata Letak
3. Klik Tab Edit HTML
4. Klik kotak kecil disamping tulisan Expand Widget Template.
expand
5. Silahkan cari  kode ini :  ]]></b:skin> kemudian copy paste kode di bawah ini persis diatasnya ingat diatasnya.
.bawahpost {
margin:15px 0px 10px 0px;
padding:5px 0;
clear:both;
}

.bawahkiri {
float:left;
width:265px;
margin-right:15px;
}

.bawahkanan {
float:right;
width:265px;
}

6. Kemudian Cari kode <data:post.body/> Lalu copy paste kode dibawah ini :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='bawahpost'>
           <div class='bawahkiri'>
            Kode Iklan anda yang ingin ada di sebelah kiri disini
           </div>
          <div class='bawahkanan'>
          Kode Iklan anda yang ingin ada di sebelah kanan disini
           </div>
</div>
</b:if>
7.  Klik tombol SIMPAN TEMPLATE.
8. S E  L E S A I

Dan hasilnya bisa sobat lihat dibawah artikel ini memang tidak secantik yang aslinya tapi lumayanlah dari pada tidak kata orang melayu... heee... hee....

Kemarin kita telah belajar membuat Tab View dengan Jquery, sekarang kita akan belajar yang lebih sederhana lagi yaitu membuat link yang ketika disorot akan memunculkan keterangan.

Untuk lebih jelasnya silahkan perhatikan dan silahkan sorot Link yang terdapat di bawah ini :

Mau Lihat Facebook saya

Untuk membuat Link seperti di atas yang ketika disorot ada keterangannya caranya sangat mudah :
Pertama Silahkan buat Link seperti dibawah ini ::
 <a href="http://www.facebook.com/profile.php?id=100000544552143" target="new">Mau Lihat Facebook saya</a> 
 Keterangan :: 
Merah adalah Link yang ingin dituju
Biru adalah Ketika di Klik akan muncul di jendela baru / di tab baru
Ungu adalah Keterangan link tersebut

Kedua agar bisa memberikan keterangan saat linknya di sorot, tambahkan saja kodenya jadi seperti dibawah ini :::
<a href="http://www.facebook.com/profile.php?id=100000544552143" target="new" title="Silahkan kunjungi facebook saya dengan mengKLIK ini">Mau Lihat Facebook saya</a>
 Keterangan :: 
Merah adalah Link yang ingin dituju
Biru adalah Ketika di Klik akan muncul di jendela baru / di tab baru
Hijau adalah keterangan link yang ketika disorot mouse akan muncul
Ungu adalah Keterangan link tersebut

Ketiga silahkan ganti link maupun keterangannya sesuai dengan selera kita dan selamat mencoba, semoga bermanfaat :)
Belajar dari masdoyok.co.cc

Kemarin kita telah belajar dengan sangat mudah Membuat Widget di Halaman Yang di Inginkan Tapi sebelum itu kita telah belajar Membuat Menu Tab View Tiga Kolom  selain berfungsi mempercantik template blog kita, Menu Tab View juga menghemat ruang dari blog kita. 

Dan satu - satunya kelemahan dari Tab View Tiga kolom yang pernah kita pelajari kemarin adalah kesulitan dalam penempatan widget bawaan dari Blogger seperti LABEL ARSIP dan lain - lain. Nah untuk menambal kekurangan tersebut kita perlu membuat Tab View dengan JQuery. 

LANGKAH LANGKAH MUDAH MEMBUAT TAB VIEW DENGAN JQUERY
1. Seperti biasa login dulu ke blogger.
2. Masuk ke DASHBOARD
3. Klik RANCANGAN  lalu pilih EDIT HTML
4. Tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>
/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}
.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://sites.google.com/site/amatullah83/bg/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.widget-tab ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:10px;
padding-bottom:10px;
font-size:13px;
}
.widget-tab ul li:last-child {
border-bottom:none;
}
.widget-tab ul li a {
text-decoration:none;
color:#3e4346;
}
.widget-tab ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.tab-content ul li a:hover {
color:#a59c83;
}
.tab-content ul li a:hover small {
color:#baae8e;
}
.active-tab{
background:#FFFFFF url(http://sites.google.com/site/amatullah83/bg/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;
}
ul.tab-wrapper {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://sites.google.com/site/amatullah83/bg/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
5. Kemudian tambahkan Script JQuery dibawah ini sebelum tag atau kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/> 
Perlu di ingat sudah terdapat script JQuery pada template kita artinya kita pernah tambahkan maka langkah nomor lima abaikan saja.
 6. Kemudian tambahkan  script berikut tepat dibawah script JQuery tadi:
<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" sc='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bloggertabv1.0-min.js.txt'></script>
Ganti  angka 2 yang berwarna biru dengan jumlah tab yang kita inginkan, awal tab dimulai dengan angka 0. Sedangkan sidebarname adalah sidebar id.
7. Selanjutnya cari kode HTML seperti dibawah ini :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
Sekarang ganti tulisan berwarna biru dengan sidebar id dari tabber tab, yaitu sidebar 1
8. SELESAI 
Sekarang kita bisa menambahkan widget yang diinginkan pada bagian elemen halaman, pastikan setiap widget memiliki nama. Kemudian drag ke sidebar. Simpan dan simpan lihat hasilnya diblog kita. Silahkan lihat contoh hasilnya pada tab view dari blog ini.


Setelah kita kemarin belajar membuat Widget di Halaman Home kita mendapat satu kekurangan untuk menampilkan widget pada halaman tertentu saja kita tidak bisa, makanya kali ini kita perlu belajar bagaimana menampilkan blog pada halaman yang kita inginkan. 
Sekarang saatnya kita belajar menampilkan widget pada halaman Blog yang kita,  inginkan. Contonya sahabat bisa lihat perbedaan ketika membuka ini lalu membuka itu terlihat pada sidebar ada widget Artikel yang wajib baca setiap anda membuka artikel. Begitulah.
LANGKAH PEMBUATAN WIDGET PADA HALAMAN YANG DIINGINKAN
Seperti biasa Masuk ke Blog >> tata letak >> Edit HTML

Lalu cari kode ini:
<b:widget id='HTML1' locked='false' title='Judul Widget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "index"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

ket: -kata yang berwarna merah adalah widget yang ada di blog Anda
      -kata yang berwarna biru adalah kode yang harus ditambahkan(halaman depan saja)

Adapun kode kode yang lain:

Untuk halaman depan saja(seperti contoh diatas)
<b:if cond='data:blog.pageType == "index"'>

untuk di halaman artikel saja:
<b:if cond='data:blog.pageType == "item"'>

untuk dihalaman archive saja:
<b:if cond='data:blog.pageType == "archive"'>

Untuk di halaman tertentu:
<b:if cond="[URL halaman anda]" == data:blog.url'>

Begitulah silahkan kita pilih kode - kodenya sesuai dengan kebutuhan blog kita agar tampil lebih cantik. Selamat Mencoba.
 
Belajar Dari :: blogkomputers.blogspot




Setelah kemarin kita belajar MEMBUAT ARTIKEL TERKAIT DI SIDEBAR Sekarang kita akan mempercantik blog kita dengan penambahan TAB VIEW. Untuk membuat TAB VIEW ini sedikit sulit jika kita menggunakan edit HTML jadi sekarang kita akan lansung membuat TAB VIEW tanpa menggunakan EDIT HTML .

LANGKAH LANGKAH MUDAH MEMBUAT TAB VIEW  
1. Seperti biasa login dulu ke blogger.

2. Masuk ke Elemen Halaman.

3. Klik Tambah Gadget lalu pilih HTML/Java Script

4. Tambahkan Kode Script Menu Tab Viewnya dibawah ini :
<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";

Tab.className = (i == id) ? "Active" : "";

Tab.blur();

}

}

while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;

while (Pages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;

var i = 0;

do

{

if (Page.className == 'Page')

{

i++;

if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";

Page.style.overflow = "auto";

Page.style.display = (i == id) ? 'block' : 'none';

}

}

while (Page = Page.nextSibling);

}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }

//]]>

</script>

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

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

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

<a>Judul 1</a>

<a>Judul 2</a>

<a>Judul 3</a>

</div>

<div style="width:300px; height:250px; " class="Pages">

<div class="Page">

<div class="Pad">

Isi menu tab view 1

</div>

</div>

<div class="Page">

<div class="Pad">

Isi menu tab view 2

</div>

</div>

<div class="Page">

<div class="Pad">

Isi menu tab view 3

</div>

</div>

</div>

</div>

</form>

<script type="text/javascript">

tabview_initialize('TabView');

</script>
6. Untuk lebar menu, font, dan tinggi menu, sobat sesuaikan saja dengan lebar sidebar sobat.

Setelah kemarin kita belaja membuat  MENGEMBALIKAN KODE CSS YANG BERANTAKAN kali ini kita akan membuat artikel terkait yang terletak di side bar terinspirasi dari blognya O Om. Dan biasanya artikel ini  diletakkan dibawah postingan.

LANGKAH LANGKAH MEMBUAT ARTIKEL TERKAIT DI SIDE BAR
1. Seperti biasa login dulu ke blogger.
2. Masuk ke Elemen Halaman.
3. Kemudian Tuju Edit HTML.
4. Klik Expand Template Widget.
5. Letakkan kode berikut ini sebelum kode </head>
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
6. Kemudian cari kode seperti dibawah ini : 
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
 7. Lalu sisipkan kode yang berwarna merah, sehingga hasilnya menjadi seperti berikut :
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if> </b:loop>
</b:if>
8.  Simpan Template, sampai disini proses Edit HTML sudah selesai. 

9. Sekarang kita menuju Tata Letak, kemudian klik Tambah Gadget pada sidebar.

10. Pilih yang HTML/Javascript, kemudian masukkan kode berikut :
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
11.  Jangan lupa beri judul, lalu klik Simpan.Contoh punya saya judulnya : ARTIKEL MENARIK LAINNYA

Sampai disini  sudah selesai pembuatan artikel terkait di sidebar. Namun permasalahannya artikel terkait akan selalu muncul di halaman depan blog kita, untuk membuat artikel terkait hanya muncul pada halaman postingan saja, maka kita harus mengubah beberapa kode lagi

12. Klik Edit HTML.

13. Klik Expand Template Widget.

14. Cari kode yang seperti ini, dan sisipkan kode yang berwarna merah :
<b:widget id='HTML11' locked='false' title='ARTIKEL MENARIK LAINNYA' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
15. Kemudian klik Simpan Template.

16. Untuk tulisan HTML 11 dan ARTIKEL MENARIK LAINNYA Hanya mengambil dari template saya, silahkan sobat sesuaikan dengan template dan judul artikel terkait yang tadi sudah sobat buat. 

Sumber : miscah.blogger

Ternyata sulitnya mempelajari format style pada kode CSS yang susunannya tidak beraturan itu, Sekalipun yang sudah mengerti apalagi saya, pasti dibuat pusing untuk menganalisanya ulang. Ditambah lagi  menggunakan mode style CSS terkompresi pasti ribet sekali, jika harus mempelajari dengan menelusuri kode CSS nya  satu-persatu.

Contoh Kode CSS yang tidak berantakan :
#navbar-iframe{display:none !important;}body{background: #fff;margin:0;color:#222;font:13px trebuchet ms;text-align:center;}
a.ts{position:absolute;right:0px;top:0px;cursor:default;}a:link{color:#3aa705;text-decoration:none;}a:visited{color:#3aa705;text-decoration:none;}a:hover{color:#0000ff;text-decoration:none;}a img{border-width:0;}
Contoh Kode CSS yang telah dirapikan :
#navbar-iframe { display: none !important; }

body {
    background: #fff;
    margin: 0;
    color: #222;
    font: 13px trebuchet ms;
    text-align: center; }

a.ts {
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: default; }

a:link {
    color: #3aa705;
    text-decoration: none; }

a:visited {
    color: #3aa705;
    text-decoration: none; }

a:hover {
    color: #0000ff;
    text-decoration: none; }

a img { border-width: 0; }
Nah kalo kodenya seperti ini akan lebih mudah diedit atau pun di modifikasi kode cssnya, yang sebelumnya acak acakan  menjadi lebih teratur dan lebih tertata rapi. saya sarankan coba saja gunakan layanan dari Styleneat.

 inspirasi o-om


Kemarin kita belajar  MEMBUAT RECENT POST DENGAN JQUERY sekarang saatnya kita belajar menampilkan buku tamu yang tersembunyi selain karena bosan dengan penampilan buku tamu ini jadi tidak kelihatan kalau buku tamu kita jarang di isi.
Buku tamu ini akan disembunyikan dibagian samping halaman blog kita, dan akan muncul ketika kita mengklik tombol buku tamu atau sebaliknya akan tutup jika kita mengklik tombolnya kembali.

LANGKAH LANGKAH MUDAH MEMBUAT BUKU TAMU TERSEMBUNYI
1. Login ke blogger
2. Klik tata letak
3. Tambahkan Gadjet pada elemen halaman
4. Pilih HTML JavaScript

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjvWYX8CMeNMoAZQEB969Epni4zrdUdjl3-vkiJF2Ba4QZT_QYQddoUtJBuSuG85uRVjYQMuqGdphES9Mu8hIFzYtl5Oc_bdVFMbqi7b_cKd54qPjX1tGpRVmBxRR0dW03p7p-fdksuFE9/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!-- Ganti ini dengan kode buku tamu kamu -->

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di
<a href="http://asmancounter.blogspot.com/">
sini (Info Blog)
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

5.  Ganti kode yang berwarna merah dengan  kode chat box kita atau buku Tamu kita.
                                                                               Selamat Mencoba dan lihat hasilnya.

Sumber@blogtrikdantips.blogspot

Setelah kemarin kita belajar membuat Membuat Show Hidden Content Onmouseover Widget, Sekarang kita belajar membuat  widget yang menurut saya cukup menarik sampai-sampai aku pasang di blogku yang diatas widget ini  adalah Recent Post dengan JQuery...

Cara membuat Recent Post dengan JQuery sangat mudah karena tinggal menambahkan widget seperti biasa ::
  • Masuk ke menu Rancangan lalu pilih elemen laman
  • Klik "tambah gadget"
  • Pilih HTML/Javascript
  • Paste kode dibawah ini ke dalamnya ::
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='JavaScript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://asmancounter.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>
  • Selanjutnya Ganti Kode berwarna merah ganti dengan alamat blog kamu
  • Warna Biru ganti dengan jumlah post yang ingin ditampilkan
  • Klik tombol simpan lalu lihat hasilnya! Mudah kan? Selamat mencoba!
    sumber@ade-tea.blogspot

    Gambar bocah striptis disamping benar - benar tidak ada hubungannya sama contoh Show Hidden Content Onmouseover Widget ini,  karena contohnya sahabat bisa lihat widgetnya disamping artikel ini silakan klik disini setelah sahabat klik sahabat bisa lihat disamping artikel ini ada widget tepatnya sebelah kiri,  itulah contoh widget Show Hidden Content Onmouseover Widget. Setelah tahu mari kita menuju TKP pembuatanya.

    LANGKAH PERTAMA  Membuat Show Hidden Content Onmouseover Widget
    •  Tentu saja  Login ke Blogger.
      • Tuliskan "User Name (Nama Pengguna)" atau bisa juga gunakan "Email Address".
      • Tuliskan "Password ".
      • KLIK "Login".
    • Sesaat setelah login maka akan terlihat halaman "Dashboard (Dasbor)". KLIK link "Design (Rancangan)"..
    • Design/Rancangan : Cari dan klik link "Edit HTML".Cari kode ]]></b:skin>
    • Kemudian Letakkan dan simpan semua kode CSS dibawah ini tepat di atasnya
    .bgsGR_onmos {
    height: 32px;
    width: 260px;
    border: 2px solid #666666;
    background: #CCCCCC;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    -o-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    padding: 5px 5px;
    margin: 15px auto;
    font: 11px Arial;
    color: #003366;
    overflow: hidden;
    box-shadow: 0 1px 8px #000;
    -moz-box-shadow: 0 1px 8px #000;
    -webkit-box-shadow: 0 1px 8px #000;
    }
    .bgsGR_onmos:hover {
    min-height: 250px;
    border: 2px solid #333333;
    background: #111;
    box-shadow: 0 1px 15px #000;
    -moz-box-shadow: 0 1px 15px #000;
    -webkit-box-shadow: 0 1px 15px #000;
    color: #000; text-shadow: 0 1px 1px #888;
    }
    .bgsGR_onmos h3, .jerohan h3 {
    font-size: 14px;
    font-family: Droid Serif;
    font-weight: bold;
    color: #000;
    text-align: center;
    text-shadow: 0px 1px 1px #fff; margin: 3px 5px;
    padding: 3px 10px;
    background: #bbb;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #999;
    -o-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    }
    .bgsGR_onmos h3:hover {
    box-shadow: 0 1px 8px #000;
    -moz-box-shadow: 0 1px 8px #000;
    -webkit-box-shadow: 0 1px 8px #000;
    }
    .bgsGR_onmos img.mini, .bgsGR_onmos img.minianima {
    width: 70px;
    border: 4px solid #666;
    padding: 3px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    float: left; margin: 0 10px 5px 0;
    background: #222;
    -o-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -webkit-transition: all 1.5s;
    }
    .bgsGR_onmos img.mini:hover, .bgsGR_onmos img.minianima:hover {
    box-shadow: 1px 1px 15px #000;
    -moz-box-shadow: 1px 1px 15px #000;
    -webkit-box-shadow: 1px 1px 15px #000;
    border: 4px solid #CCCCCC;
    background :#666;
    -o-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    margin-top: 20px;
    margin-left: 15px;
    }
    .bgsGR_onmos img.minianima:hover {
    -o-transform: scale(1.4) rotate(360deg) translate(0px);
    -moz-transform: scale(1.4) rotate(360deg) translate(0px);
    -webkit-transform: scale(1.4) rotate(360deg) translate(0px);
    }
    .jerohan {
    margin-top: 15px;
    height: 200px;
    overflow: auto;
    padding: 0 5px;
    -o-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out; background: #CFE7E9;
    }
    .jerohan:hover {
    background: #333;
    color: #eee;
    text-shadow: 0 0px 1px #fe0303;
    }
    .jerohan h3 {
    margin: 20px 0;
    max-width: 204px;
    background: #66CCFF;
    box-shadow: 0 1px 12px #eee;
    -moz-box-shadow: 0 1px 12px #eee;
    -webkit-box-shadow: 0 1px 12px #eee;
    }
    .jerohan h3:hover {
    background: #888;
    border: 1px solid #666;
    box-shadow: 0 1px 12px #fff;
    -moz-box-shadow: 0 1px 12px #fff;
    -webkit-box-shadow: 0 1px 12px #fff;
    }
    .jerohan ul {
    padding: 0;
    margin: 0;
    list-style: none;
    }
    .jerohan li {
    padding: 0;
    margin: 0;
    list-style: none;
    border-bottom:1px dotted #777;
    }
    .jerohan li a{
    color: #03d8fe;
    padding: 0;
    margin: 0;
    text-decoration:none;
    font-size: 12px;
    -o-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -webkit-transition: all 1.5s;
    }
    .jerohan li a:hover {
    -o-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    color: red;
    text-shadow: 0 1px 1px #000;
    margin-left: 20px;
    }
     LANGKAH KEDUA Membuat Show Hidden Content Onmouseover Widget

    Masih berada pada menu Edit HTML dan masih mencari  ]]></b:skin> (  untuk lebih memudahkan silahkan tekan tombol CtrL dan F bersamaan lalu paste ]]></b:skin didalam kotak pencarian ) Setelah ketemu silahkan copy dan pastekan kode dibawah ini tepat dibawahnya ]]></b:skin>`ingat dibawahnya hee.... hee....... Jika Sudah Silahkan Save Template sahabat.

    <!--[if IE]>
    <style type="text/css">
    .bgsGR_onmos {height: 30px; }
    .bgsGR_onmos h3, .jerohan h3 {font-size: 13px; }
    </style>
    <![endif]-->

      
    LANGKAH KETIGA  Membuat Show Hidden Content Onmouseover Widget

    Kembali Buka dasboard Blog sahabat, kemudian klik rancangan tambah gadget  KLIK "HTML/Javascript". Setelah box penyimpanan widget terlihat, masukkan kode dengan copy-paste. KLIK SAVE/Simpan. Lihat hasilnya
    <div class="bgsGR_onmos">
    <h3>ASMAN COUNTER</h3>
    <div class="jerohan">
    <h3>BLOGGER TINGGI</h3>
    <img class="mini" src="http://i52.tinypic.com/i74lrk.gif" />Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks? Atau mungkin deretan menu dan link lain mo ditampilkan di collapsible ini? Semua sudah tertata dengan rapi dengan ukuran yang sangat ideal. Sampeyan tinggal masukkan saja sebanyak sampeyan mau. Plung ... plung ... plung ... dan berkarung-karung akan terwadahi. yah ... asal jangan masukkan yang berbau busuk saja. He ... he .... 'ntar pengunjung pada lari kesetanan kaya dikejar babi hutan kesurupan mabok oplosan, he ...... he ...!!!!
    <h3>New Post</h3>
    <ul>
    <li><a href="Link-1">Tuliskan disini : Link Title-1</a></li>
    <li><a href="Link-2">Tuliskan disini : Link Title-2</a></li>
    <li><a href="Link-3">Tuliskan disini : Link Title-3</a></li>
    <li><a href="Link-4">Tuliskan disini : Link Title-4</a></li>
    <li><a href="Link-5">Tuliskan disini : Link Title-5</a></li>
    <li><a href="Link-6">Tuliskan disini : Link Title-6</a></li>
    <li><a href="Link-7">Tuliskan disini : Link Title-7</a></li>
    <li><a href="Link-8">Tuliskan disini : Link Title-8</a></li>
    <li><a href="Link-9">Tuliskan disini : Link Title-9</a></li>
    <li><a href="Link-10">Tuliskan disini : Link Title-10</a></li>
    </ul></div></div>
    Silahkan sahabat ganti Link dan tulisan yang berwana Merah dan biru sesuai dengan yang sahabat inginkan. Selamat Mencoba.

    Belajar Blogger, Setelah kemarin kita belajar Mudahnya share tombol suka | button Like di Blog Sekarang saatnya kita  belajar menampilkan widget hanya pada awal halaman Blog kita, contonya sahabat bisa lihat perbedaan ketika membuka ini lalu membuka itu terlihat sekali semua widget yang ada pada footer bawah tidak ada widgetnya lagi.

    Untuk membuatnya kita Harus Kembali ke TKP  Seperti biasa Login ke Blog Sahabat sendiri.  Sebenarnya pada kasus ini kita hanya menambahkan dua baris kode pada setiap halaman sidebar yang di tambahkan atau yang terpasang.  Silahkan sahabat Pilih salah satu widget  yang akan kita tampilkan di halaman depan blog,

    CONTOH :
    1. Pada Blog ini saya memilih SITE BLOG 
    2. kemudian buka Template
    3. Klik "Rancangan"  
    4. Klik  "Edit Html" ingat jangan lupa centang atau tandai kotak kecil di samping tulisan Expand Template Widget. 
    5. Cari tulisan atau  SITE BLOG setelah ketemu Tambahkan dan letakan dua baris kode pada posisi seperti  tulisan yang kita beri warna  BIRU dibawah ini.
    6. <b:widget id="HTML1" locked="false" title=" SITE BLOG " type="HTML"> <b:includable id="main">
      <b:if cond='data:blog.homepageUrl == data:blog.url'>
      <!-- only display title if it's non-empty --> <b:if cond="data:title != """> </b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2> <div class="widget-content"> <data:content> </data:content> </div>
      </b:if>
      <b:include name="quickedit"> </b:includable> </b:widget>
    7. Silahkan sahabat SAVE / Template Sahabat..Ingat Hanya tambahkan dua baris kode itu saja.
    Perlu juga  kita ketahui, Setiap menambahkan sebuah Widget secara default blogger telah memberi nama sesuai dengan widgetnya. 
    • Misalkan Elemen Widget Html/javascript di namai dengan Html, 
    • Elemen Widget  Daftar Link di namai LinkList, 
    • Elemen Widget Teks di namai text, 
    • Label di namai label. 
    • Dan Seterusnya
    Setiap menambahkan elemen yang sama misalkan 
    ELEMEN WIDGET TEXT, maka blogger menemainya dengan Text1, Text2, Text3 dst. 
    HTML/JAVASCRIPT  Maka Blogger menamainya dengan  Html1, Html2,Html3 dst

    Maka dari itu agar mudah mencari widget Eemen yang kita tambahkan, baiknya kita memberikan judul pada setiap widget. Salam Persahabatan Blogger.

    BLOGGER MENENGAH | Beberapa hari yang lalu saya jalan - jalan ke blog nya Sobat Blogger dan ada keanehan  disana hampir setiap artikel yang ditampilkan selalu ada Tombol Suka dengan background ciri khasnya Facebook. Dan ketika saya klik tombol “SUKA”nya tiba - tiba  muncul status tersebut di facebook saya. Wow.. keren banget.

    Jadi Pengen juga menampilkan tombol suka itu di Asman Counter makanya  coba  coba search di google ketemu juga sebuah plugins yang bernama “ fb like button”. silakan kunjungi link ini untuk melihatnya. Lalu saya coba   instal di asmancounter.blogspot.com. Dan hasilnya seperti yang terlihat dibawah judul setiap posting itu setelah dikreasikan makanya seperti itu ternyata mudah saja kalau mau mencoba :

    Sebagai Kenangan saya rekam aja prosesinya :
    Masuk ke facebook widget untuk like button, atau klik link ini -> Facebook like button. Klik gambar dibawah jika ingin lebih jelas :Setting like button
    1. Di kotak biru seperti gambar disamping ini, isi “URL to Like” dengan <?php the_permalink() ?> ini berfungsi guna menampilkan link address artikel.
    2. like text
      Add caption
    3. Di “Layout Style” pilih standard  atau button_count like button count dengan sejumlah angka yang menyukai artikel blogger kita disebelah button.
    4. Option “Show Face” untuk menampilkan profile picture kita di bawah button.
    5. Width“, biarkan saja tertulis 450, atau sesuaikan dengan kolom content blog kita
    6. Verb to display“, pilih diantara kata like like button atau recommendrecommend button
    7. Font” pilih jenis huruf yang anda suka.
    8. Color Scheme” pilih antara dark (gelap) dan light (terang) sesuaikan dengan background kita.
    9. Lalu klik “Get Code” Copy kode yang ada di bagian XFBML.
       10. lalu buka blog kita dashboard cari rancangan > Edit HTML
             dan  jangan lupa centang “Expand Widget Templates” nya
       11. Lalu cari <data:post.body/> lalu paste di atas atau dibawahnya 

             suka - suka kita
       12. Kemudian di Save. Tet teret jadi deh Tombol suka | Button suka kita. Gimana Mudahkan...?!

    Setelah Blog Kita sudah cantik  kini saatnya kita untuk mendaftarkan Blog kita ke mesin pencari yang jumlahnya sangat banyak sekali agar Blog dengan tujuan agar blog kita terindeks di mesin pencari tersbut. Dan Artikel kali ini akanmembahas cara mendaftarkan Blog ke Mesin Pencari yang paling terkenal di dunia seperti Google, Yahoo, serta Msn. 
    • Daftar Blog di Google

    Untuk mendaftar ke google, silahkan sobat kunjungi http://www.google.com/addurl/, Kemudian setelah sobat berada pada halaman pendaftaran ada beberapa langkah yang harus di lakukan, yaitu mengisi form yang di sediakan :
    URL --> Isi dengan URL blog sobat. Comments --> Isi dengan keyword atau kata kunci yang berhubungan dengan blog sobat Isi kotak kosong dengan huruf Verifikasi yang tersedia Klik tombol Add URL Selesai.
    Setelah sobat melakukan pendaftaran ke Google, maka tidak serta merta blog sobat terindeks pada mesin pencari nya, akan tetapi memerlukan 3 sampai 4 minggu baru blog sobat bisa terindeks. Jika sudah 3 sampai 4 minggu, maka cobalah ketik alamat blog sobat pada mesin pencari google, apakah sudah terindeks atau belum? jika belum, coba tunggu beberapa minggu lagi, dan tuliskan kembali alamat blog sobat, Jika ternyata masih belum juga, coba deh daftarin lagi blog nya ke google seperti langkah di atas.
    • Daftar Blog di Yahoo!
    Untuk mendaftar ke yahoo! silahkan sobat kunjungi https://siteexplorer.search.yahoo.com/submit. Akan tetapi untuk mendaftar ke yahoo, sobat harus terlebih dahulu mempunyai account yahoo, karena di perlukan log in terlebih dahulu ke account yahoo. Bagi yang belum punya account yahoo (email di yahoo) silahkan bikin dulu, bagi yang sudah punya, sobat tinggal login dengan username serta password sobat. Apabila sudah login, nanti sudah tersedia kolom untuk di isi, silahkan isi kolom tersebut dengan URL sobat, kemudian klik tombol Add URL, selesai. Jika ingin memasukan alamat feed sekalian, sobat bisa memasukannya. Ingat, alamat feed di blogger hanya tinggal menambahkan atom.xml di belakang uRL blog sobat, contoh : untuk blog saya ini mempunyai alamat feed sebagai berikut : http://darikendawangan.blogspot.com/atom.xml atau memakai www pun sama saja : http://www.darikendawangan.blogspot.com/atom.xml
    • Daftar ke Msn
    Untuk daftar ke Msn, silahkan sobat kunjungi http://search.msn.com/docs/submit.aspx?FORM=WSDD2 silahkan sobat isi huruf verifikasi dan URL sobat pada kotak yang tersedia, kemudian klik tombol Submit URL, selesai. Selamat Mencoba dan pastikan blog sobat terindeks di google...?!

    BLOGGER DASAR | Setelah beberapa hari yang lalu Kita lebih mengenal menu setting yang ada pada Blog, Sekarang saatnya kita mempercantik Blog kita dengan Template yang lain yang sesuai dengan jiwa kita dan lebih cantik tentunya. Baik yang disediakan oleh Blogger itu sendiri maupun yang disediakan oleh penyedia Template.

    Kita ikuti saja cara-cara mudah untuk mengganti template yang disediakan oleh Blogger.
    1. Silahkan login ke blogger dengan ID kita.
    2. Klik Rancangan.  rancangan
    3. Klik menu Perancang Template. Selanjutnya akan muncul jendela perancang template blogger. perancang template
    4. Klik pada pilihan template yang tersedia. Selain itu, kita dapat pula memilih background atau gambar latar belakang dari template tersebut. Jika sudah cocok dengan salah satu template, klik  blogger template designer APPLY TO BLOG.
    5. Selesai.

    Sedangkan cara-cara untuk mengganti template dari penyedia template sebagai berikut :
    ekstrak template
    1. Download terlebih dahulu template yang kita sukai pada website penyedia template blog gratis. Salah satu contoh kita bisa download di blogger templates.miliknya Kang Rohman
    2. File template yang didownload, biasanya masih dalam bentuk terkompresi (zip atau rar), oleh karenany kita perlu mengekstrak atau menguraikan file tersebut dengan software ekstraktor seperti WinZip atau WinRar.
    3. Yang nanti di upload atau di unggah ke blogger hanyalah file yang berekstensi .xml.
    4. Silahkan login ke blogger dengan ID kita.
    5. Klik Rancangan. rancangan
    6. Klik menu Edit HTML. edit html
    7. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap. download template lengkap
    8. Klik tombol Browse.., pilih file template yang tadi didownload dan telah diekstrak ( file ekstensi .xml saja ). Kemudian klik tombol Unggah. unggah template
    9. Apabila ada muncul peringatan tentang widget, klik pada tombol PERTAHANKAN WIDGET. pertahankan-widget
    10. Selesai.
    Kini tampilan blog kita akan lebih terasa cantik dibanding sebelumnya. Tidak Percaya Silahkan coba!

    Lihat Gambar disamping cara membuatnya pada label  :
    * Pertama Klik Menu Dashboard.
    * Klik Menu Tata Letak.
    * Klik Tab Edit HTML.
    * Klik Tulisan Download Template Lengkap.

    * Back up atau save dulu template tersebut. Dikarenakan bila terjadi kesalahan maka bisa diulang kembali.
    * Beri tanda Centang pada kotak yang disamping tulisan Expand Template Widget.
    * Tunggu proses loadingnya...
    * Silahkan anda cari kode berikut:

    <b:widget id='Label1' locked='false' title='Blog Archive' type='Label'>

    tambahkan kode beikut:

    <div style='overflow:auto; width:ancho; height:100px;'>

    dan

    </div>

    sehingga menjadi seperti berikut

    <b:widget id='Label1' locked='false' title='Blog Archive' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <div style='overflow:auto; width:ancho; height:100px;'>
    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <data:label.name/>
    <b:else/>
    <a expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    (<data:label.count/>)
    </li>
    </b:loop>
    </ul>
    </div>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>

    Yang berwarna Biru adalah kode yang harus ditambahkan di script itu. Selanat Mencoba.

    Kali ini Kita Lagi - Lagi Belajar tentu saja belajar membuat Tulisan Berkedip alias Timbul Tenggelam. Untuk Membuat tulisan ini kuncinya cuma dua kata yaitu : <blink> dan </blink> Contoh Penerapan nya dalam Tulisan seperti dibawah ini :
    <blink> Gw tau loe gak bisa tidur mikirin gw, Dan gw sadar bgt akan hal itu, Makanya gw kirim sms ini ke loe, Supaya loe bisa tidur nyenyak & mimpi indah setelah terima sms dari gw. Sekarang, pejamkan mata loe, Jangan sedih ya.., Percaya deh kalo gw yang ganteng ini disini juga mikirin loe! Have nice dream fans gw..</blink>
    Dengan menambahkan tulisan yang berwarna merah diatas maka Hasilnya akan Jadi seperti dibawah ini :   
    Gw tau loe gak bisa tidur mikirin gw, Dan gw sadar bgt akan hal itu,
    Makanya gw kirim sms ini ke loe Supaya loe bisa tidur nyenyak &amp; mimpi indah setelah terima sms dari gwSekarang, pejamkan mata loe,
    Jangan sedih ya.. Percaya deh kalo gw yang ganteng ini disini juga mikirin loe!
    Have nice dream fans gw..
    Mudah Banget kan Selamat mencoba ya.... Buat Family Kendawangan Terima Kasih Sudah Mampir.

    BELAJAR BLOGGER Setelah beberapa hari yang lalu kita Posting Artikel pertama kalinya sekarang saatnya kita mengenal lebih dekat Fungsi dari menu setting yang ada pada Blog kita, dengan harapan nantinya setelah kita mengenal akan lebih mudah untuk mengoptimalkan blog yang telah kita miliki
    1. Menu Settings -> Basic
    • Blog Tools: untuk restore (import blog), backup (export blog) dan hapus blog secara permanen (delete blog)
    • Title: untuk mengisi judul blog. Judul ini akan muncul di header blog dan halaman search engine (serp)
    • Description: untuk mengisi deskripsi blog. Deskripsi ini akan muncul di bagian header blog
    • Add your blog to our listing: untuk mengatur apakah blog kita mau ditampilkan pada menu blogger seperti blogger play dan next blog atau tidak
    • Let search engines find your blog: Untuk mengatur apakah blog kita mau di index di halaman mesin pencari Google dan Weblogs.com atau tidak
    • Show quick editing on your blog: untuk menampilkan icon quick edit pada postingan yang berfungsi untuk mengedit postingan secara langsung dari halaman blog
    • Show email post links: untuk menampilkan icon berbentuk amplop pada postingan yang berfungsi untuk memperbolehkan pembaca mengirim link artikel kita kepada orang lain via email
    • Adult Content: untuk menentukan apakah blog kita mengandung konten porno atau tidak
    • Select Post Editor: untuk memilih jenis post editor yang ingin kita gunakan
    • Enable Transliteration: untuk mengaktifkan fungsi terjemahan pada post editor kedalam bahasa yang dipilih.
    2. Menu Setting -> Publishing
    • Custom domain: Untuk mengganti alamat dari blogspot.com ke domain sendiri seperti .com, .net, .org, dll
    • Blogspot Address: Kalau custom domain untuk mengganti alamat blogspot ke domain sendiri maka yang ini untuk mengganti alamat blogspot yang satu ke alamat blogspot yang lain. (yang belum terdaftar)
    • Word Verification: kode verifikasi
    3. Menu Setting -> Formatting
    • Show at most: untuk menentukan jumlah postingan yang mau ditampil pada halaman blog
    • Date Header Format: Untuk menentukan format tanggal yang mau ditampilkan diatas judul posting
    • Archive Index Date Format: untuk menentukan format tanggal yang mau ditampilkan pada menu arsip yang terletak di kolom sidebar
    • Timestamp Format: untuk menentukan format waktu yang mau ditampilkan pada postingan
    • Time Zone: untuk menentukan zona waktu tempat tinggal kita. Misalnya (GMT+07.00) Jakarta untuk wilayah Indonesia
    • Language: untuk memilih bahasa yang mau digunakan
    • Convert link breaks: untuk mengatur apakah mau dikonversi kode tag pada post editor secara otomatis. Biarkan Yes saja.
    • Show Title Field: untuk menampilkan judul postingan. Jika pilih No maka blogger akan mengambil beberapa kata pada awal paragraf sebagai judul postingan. Pilih Yes saja
    • Show Link Field: untuk menambahkan link yang berhubungan kedalam setiap postingan. Jika tidak ada, pilih No saja
    • Enable Float Alignment: untuk mengaktifkan fungsi penjajaran pada text dan gambar
    • Post Template: untuk mengisi teks yang mau ditampilkan pada kotak posting
    4. Menu Setting -> Comments
    • Comments: untuk menampilkan kotak komentar
    • Who Can Comment: untuk menentukan siapa yang boleh memberi komentar
    • Comment Form Placement: untuk menentukan dimana letak kotak komentar
    • Comments default for posts: untuk mengatur apakah mau diberi komentar pada postingan baru atau tidak
    • Backlinks: untuk mengatur apakah mau diberi notifikasi jika ada yang memasang link pada artikel kita atau tidak
    • Backlinks default for posts: untuk mengatur apakah mau mengaktifkan fungsi backlinks atau tidak
    • Comments Timestamp Format: untuk memilih format waktu yang mau ditampilkan pada kotak komentar
    • Comment Form Message: untuk menampilkan pesan singkat diatas kotak komentar
    • Comment Moderation: untuk menyaring komentar yang masuk sebelum diposting
    • Show word verification for comments: untuk menampilkan kode verifikasi jika ada yang ingin memberi komentar supaya terhindar dari sistem bot yang melakukan spam
    • Show profile images on comment: untuk menampilkan gambar profil dari komentator yang memiliki blog di blogger
    • Comment Notification Email: untuk mendapatkan pemberitahuan dari blogger melalui email jika ada yang meninggalkan komentar
    5. Menu Settings -> Archiving
    • Archive Frequently: untuk mengatur frekuensi arsip. Misalnya arsip harian, mingguan atau bulanan
    • Enable Post Pages: mengaktifkan halaman posting untuk setiap artikel
    6. Menu Settings -> Site Feed
    • Allow Blog Feed: untuk menentukan jumlah karakter artikel yang dikirim via RSS Feed atau Feed email
    • Post Feed Redirect URL: untuk mengisi alamat URL Feed kita. Jika belum punya dikosongin aja
    • Post Feed Footer: untuk mengisi teks tambahan pada feed
    7. Menu Settings -> Email & Mobile
    • Blogsend Address: untuk mendapat kiriman postingan ke alamat email kita setiap kali kita memposting pada blog kita.
    • Email posting address: untuk menentukan alamat email blogger yang kita inginkan.Agar kita bisa memposting artikel langsung ke blog kita via email. Catatan: Jangan memberitahu alamat email ini ke orang lain. Jika tidak, orang lain bisa memposting artikel di blog kita.
    • Mobile Devices: Untuk memposting artikel ke blog kita via MMS atau SMS dari hp kita.
    8. Menu Settings -> OpenID
    • OpenId: Secara ringkas, openId semacam identitas kita di internet. Dengan openid kita bisa masuk ke dalam website yang berbeda-beda yang mendukung openid tanpa memasukkan username dan password anda seperti lazimnya. Keterangan lanjut tentang OpenID
    9. Menu Setting -> Permissions
    • Blog Authors: memperbolehkan orang lain untuk ikut menulis di blog kita. Caranya klik Add Authors lalu masukkan alamat email orang yang mau diundang kemudian klik Invite
    • Blog Readers: untuk mengatur siapa yang bisa membaca artikel blog kita.
    Oke sobat cukup membingungkan tapi semoga tidak bingung amat.