Cara membuat Scrollbar Pada Label di Blog

Kata scroll memang sudah tidak asing bagi anda. Yang namanya scroll adalah sesuatu yanh dapat ditarik ke atas dan ke bawah. Sebagai contohnya antara lain lihatlah sebelah kanan bagian archive. Scroll dibagi menjadi 2, yaitu scroll vertikal dan scroll horizontal.

Kali ini saya akan memanfaatkan scroll vertikal untuk menghemat tempat di blog. scroll vertikal adalah scroll yang menggulung dari atas ke bawah. caranya dengat membuat scroll pada label,blog arsip atau widget lainnya yang mempunyai bentuk memanjang ke bawah. Hal ini pasti akan menghemat tempat di blog kita. Bagi anda yang belum mengetahui caranya, ikuti saja tutorial di bawah ini.

Langkah-langkah :

1. Seperti biasanya, login ke account blogger anda dulu.

2. Lalu anda akan masuk ke menu Dashboard / Dasbor, dari situ langsung saja menuju ke menu Design / Rancangan. Kemudian, masuklah ke menu Edit HTML.

3. Sebelum anda dapat membuat scroll pada widget, anda harus mencari ID dari widget tersebut.

4. Di bawah ini hanya contoh ID dasar widget, tapi tidak selalu sama dengan ID widget di blog anda.

A. Widget Label = Label1 ; Label2 ; Label3 ; dan seterusnya

B. Widget Blog Arsip = BlogArchive1 ; BlogArchive2 ; BlogArchive3 ; dan seterusnya


C. Widget Profil Blogger = Profile1 ; Profile2 ; Profile3 ; dan seterusnya


5. Sebagai contoh, saya akan membuat scroll pada widget Label.
6. Cari kode ]]> dengan menggunakan Ctrl + F
7. Kemudian, letakkan kode berikut di atas kode ]]>

#Label1 .widget-content{

height:200px;

width:auto;
overflow:auto;
}

Yang perlu di perhatikan :

• Label1 adalah ID dari widget label. Ganti dengan ID widget yang ingin anda buat scroll
• height:200px; adalah tinggi dari widget scroll. Ganti dengan tinggi widget scroll yang anda inginkan

8. Susunan lengkapnya akan menjadi seperti di bawah ini

#Label1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}
]]>

Jangan lupa tinggalkan koment kawan...!!!!

Cara Membuat Related Post Dengan Thumbnail (gambar) Pada Blog

Pada kesempatan ini saya akan memberikan Tutorial dan Trik Tips Blog yaitu cara membuat related post yang lebih menarik dengan menambahkan Thumbnail (gambar).
Agar lebih jelas perhatikan gambar dibawah ini.

Keren bukan? Cara ini bisa digunakan bersama dengan related post tanpa thumbnail. 
Bagi kawan yang tertarik memasang widget ini,, trus lanjutkan membaca.
Tapi bagi kawan yang tidak tertarik..!!! Trus lanjutkan membaca juga... HHheheh
Langsung saja kita ke KTP eehh TKP :P ..


1. Buka menu Design (Rancangan) -> Edit HTML

2. Centang "Expand Widgets Templates"
3. Letakkan kode dibaawh ini tepat diatas </head>  
    Note : gunakan Ctrl+F utk mempermudah pencarian.

<!--Related Posts with thumbnails Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts { float:center; height:100%; min-height:100%; padding-top:10px; padding-left:15px; padding-right:15px; } #related-posts h2{ font-size: 1.3em; color: black; font-family: Arial; margin-bottom: 0.75em; } #related-posts a{ color:black; } #related-posts a:hover { background-color:#eeeeee; } </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGWj7vE6vpOhtuixK9oJ1X8B8olSD78TStkmXXOA8mCHkS2-rN1tnAkDif0Zv0jOvoDp09-eEn9YFjNfgJ-mQl9TKC8OsOI9Jzl1T6seaHPTeyqEQtUSo6YdHfkmmys2PHNiDCidpKahhQ/"; var maxresults=5; var splittercolor="#cccccc"; var relatedpoststitle="You might also like:"; </script> <script src='http://hermanblog.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails End-->


4. Lalu cari kode script  <p class='post-footer-line post-footer-line-1'/>
5. Kalau tidak ketemu coba cari post-footer-line  
6. Letakkan kode berikut ini tepat dibawahnya.


<!-- Related Posts with Thumbnails Code Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script> </div><div style='clear:both'/> <!-- remove --></b:if> <!-- Related Posts with Thumbnails Code End-->

Keterangan:
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGWj7vE6vpOhtuixK9oJ1X8B8olSD78TStkmXXOA8mCHkS2-rN1tnAkDif0Zv0jOvoDp09-eEn9YFjNfgJ-mQl9TKC8OsOI9Jzl1T6seaHPTeyqEQtUSo6YdHfkmmys2PHNiDCidpKahhQ/" menunjukkan gambar yang akan muncul pada postingan yang tidak memiliki gambar. Anda bisa mengganti gambar tersebut dengan gambar yang anda sukai.

var maxresults=5 menunjukkan jumlah postingan yang akan muncul pada related post. Anda bisa mengaturnya sesuai jumlah postingan yang mau ditampilkan dengan mengganti angkanya.

var splittercolor="#cccccc" menunjukkan warna garis pemisah. Ganti cccccc dengan kode warna yang anda inginkan.

var relatedpoststitle="You might also like:" menunjukkan judul related post. Ganti teks yang berwarna merah dengan judul yang anda inginkan.


Jika kawan merasa pusing atau kesulitan dengan cara yang saya berikan diatas,
anda bisa menggunakan widget related post dengan thumbnail yang disediakan oleh linkwithin.com. Untuk cara pemasangannya sangat mudah, berikut langkah-langkahnya:

1. Buka situs http://www.linkwithin.com

2. Isi data-data yang diperlukan pada form yang telah disediakan

Email: alamat email anda
Blog link: Alamat blog dimana anda memasang widget related post with thumbnail
Platform: pilih Other
Width: pilih jumlah related post yang mau ditampilkan

Beri centang pada kotak kecil jika anda menggunakan background template yang gelap

3. Klik Get Widget

4. Copy dan paste kode script yang diberikan diatas </body> pada template blog anda lalu simpan template anda. Selesai

Jika ada yang kurang jelas atau mengalami kendala dalam memasang related post dengan thumbnail silahkan tinggalkan komentar anda dibawah ini. Saya akan berusaha untuk membantu anda. 
7. Kalau sudah Save template anda. 
 

Cara Memasukkan Video Youtube Ke Posting Blog

Sudah kenal sama YouTube kan?...

Saya yakin teman-teman sudah tau, siapa sih yang ga kenal sama youtube.

Pada kesempatan kali ini saya ingin membahas bagaimana cara memasukkan Video YouTube ke postingan blog blogger, bukan Cara Download Video YouTube lho..

Bagi teman-teman yang ingin membuat blog yang berisi dengan Video YouTube pada khususnya, sudah tentu wajib mengetahui cara memasukkan vide youtube ke postingan.

Sebenarnya Memasukkan Video Youtube ke posting blog bukanlah hal yang susah, tapi kalau ga tau caranya tetap saja susah. Selain video youtube kita juga bisa memasukkan video yang ada di komputer/laptop kita ke postingan blog.

Ok Langsung saja.

Cara Memasukkan Video Ke Postingan Blog Blogger

Langkah pertama

Silahkan cari video youtube yang ingin anda masukkan ke posting di situsnya yaitu www.youtube.com

Langkah keDua


Silahkan klik tulisan Embed yang letaknya di sebelah kanan Video tersebut dan silahkan tunggu sampai kode html nya terlihat . Lihat Gambar Berikut.

Langkah keTiga


Kopi kode html yang sudah di sediakan oleh youtube tadi kemudian paste ke postingan blog, ingat pastenya di bagian Edit HTML, jika anda belum tau di mana letak Edit HTML tersebut silahkan baca artikel Cara Memasukkan Kode Html Di Posting Blogger.

Langkah keEmpat


Letakkan kode html vide youtube tersebut di tempat yang anda inginkan, setelah itu silahkan publikasikan Postingan tersebut.

Jika anda mengklik Menu Compose (yang bersebelahan dengan Edit HTML itulho), maka video youtube tersebut akan terlihat seperti ini:

Oh ia.. Hampir saja lupa.

Tadi saya bilang bahwa kita bisa juga mamasukkan video dari komputer/laptop ke postingan blog blog.

Untuk panduan bagaimana cara memasukkan atau upload video yang ada di koputer/laptop kita ke postingan blog blogger silahkan lihat Video YouTube di bwah ini.



Di dalam video tersebut juga ada sedikit tutorial cara memasukkan video you tube ke postingan blog blogger.

Jangan lupa tinggalkan komentarnya....!!!!!!!!!!! :))

Cara Membuat DoFollow Pada Blog

Cara membuat dofollow di blogger

Pada Blogger atau Blogspot terdapat 2 (dua) attribute rel="nofollow" pada body HTMLnya. Pertama adalah pada kolom komentar, dan kedua ada pada Kolom Backlink. Untuk menjadikan Blog kita "You Comment I Follow" atau Do Follow, hanya dibutuhkan penghilangan pada satu tempat saja, yaitu pada kolom komentar. Karena inti yang ingin diraih adalah memberi Backlink, pada pemberi komentar.
Cara menghilangkan Attribute rel="nofollow" pada kolom komentar :

1. Setelah Sign-in dan masuk ke Dashboard, Klik Layout > Edit HTML, lalu beri tanda centang(thick) di "Expand Widget Templates". BACKUP templates kawan-kawan, Lalu cari kode berikut

<dl id='comments-block'>
<b:loop values='data:post.comments'var='comment'>
<dt class='comment-author'expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" +data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

Untuk masuk ke "Daftar Blog Do Follow" diatas, kawan-kawan hanya perlu melakukan penghilangan attribute rel="nofollow" pada kolom komentar saja.

2. Kemudian hapus kode rel='nofollow', lalu "save template". Selesai, Sekarang Blog kita Do Follow :) dan berhenti sampai disini juga SUDAH CUKUP.

Berikut adalah cara untuk menhilangkan attribut rel="nofollow" pada kolom BACKLINK/TRACKBACK. Metode kedua ini TIDAK wajib.. Kolom Backlink/trackback adalah kolom yang disediakan untuk membuat track jika ada yang melakukan Link terhadap Posting tulisan kita. Sekali lagi, kolom ini boleh dibiarkan dan tidak di buat do follow.

1. Setelah Sign-in dan masuk ke Dashboard, Klik Layout > Edit HTML, lalu beri tanda centang(thick) di "Expand Widget Templates". BACKUP templates kawan-kawan, Lalu cari kode berikut

<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>

2. Hapus kode rel='nofollow', lalu "save template". Selesai

Untuk masuk ke "Daftar Blog Do Follow" diatas, kawan-kawan hanya perlu melakukan penghilangan attribute rel="nofollow" pada kolom komentar saja

Cara Menambahkan Background Pada Judul Posting Di Blog

Buat teman-teman yang mempunyai blog dan di blognya pada bagian judul postingan ingin membuat background yang warnanya bebrbeda dengan background utama maka anda bisa mengubah sedikit script pada template anda. Menurut beberapa sumber yang pernah saya baca agar blog lebih seo friendly maka judul postingannya di buat lebih besar ukurannya dari ukuran teks isi postingan, dan lebih kecil dari ukuran teks dan deskripsi header. Selain itu membuat background pada judul postingan bisa memudahkan pengunjung melihat judulnya, dan katanya lebih memudahkan search engine mendeteksi keyword yang ada di judul tersebut.

Contoh judul postingan yang di-ubah background-nya bisa dilihat seperti gambar di bawah ini.

Untuk mengubah /membuat background judul postingan lakukan prosedur berikut:

1. Di dashboard pilih Rancangan , Edit HTML

Cari kode : post-title {

Di bagian bawah post-title { , masukkan kode

line-height: 2.1em;
border: 4px solid #000099;
background-color: #000099;

atau
line-height: 2.1em;
border: 4px solid yellow;
background-color: yellow;

catatan: #000099 adalah kode hexadesimal untuk warna biru (bisa gunakan warna lain)
Selain menggunakan kode warna hexadesimal anda juga bisa menggunakan warna seperti: yellow , red, pink, blue,green, black, dll.
Untuk warna lainnya bisa dilihat disini kode warna

Tampilan scriptnya seperti di bawah ini

post-title {
margin: 0;
padding: 0;
font-size: 125%;
font-weight: bold;
line-height: 2.1em;
border: 4px solid yellow;
background-color: yellow;

atau:

post-title {
margin: 0;
padding: 0;
font-size: 125%;
font-weight: bold;
line-height: 2.1em;
border: 4px solid #000099;
background-color: #000099;


Contohnya bisa dilihat di blog ini atau di blog berikut

Cara Mengganti Kursor / Pointer Pada Blog

Cara Mengganti Gambar Kursor di Blog  -  Gara-gara kepingin sekali mengganti gambar kursor di blog ini, akhirnya setelah googling kesana kemari nemu juga sebuah situs yang menyediakan banyak gambar-gambar kursor pilihan. Gambar kursor yang disediakan situs penyedia gambar ini http://www.totallyfreecursors.com/ banyak sekali, jadi kita tinggal memilih sesuai selera aja. Untuk cara memasang gambar kursor ini di blog, kita harus menambahkan sedikit saja kode CSS supaya bisa dipasang pada template. Dibawah ini ada beberapa sample gambar untuk kursor yang saya ambil berikut URL alamat kursor tersebut.

              URL : http://downloads.totallyfreecursors.com/thumbnails/monkey-ani.gif

                URL : http://downloads.totallyfreecursors.com/thumbnails/aliendance.gif

                URL : http://downloads.totallyfreecursors.com/thumbnails/tail2.gif

                URL : http://downloads.totallyfreecursors.com/thumbnails/banana1.gif

                URL : http://downloads.totallyfreecursors.com/thumbnails/bullseye-ani.gif

               

Cara mengganti gambar kursor di blog :

1.    Login ke dashboard blogger anda.

2.    Pilih Rancangan > Edit HTML, centang Expand widget template.

3.    Carilah kode </head> pada template anda dengan menggunakan Ctrl F.

4.    Copy kode CSS dibawah ini dan letakkan tepat diatas kode </head> .

<style type='text/css'> HTML,BODY{cursor: url(&quot;http://downloads.totallyfreecursors.com/thumbnails/sweden.gif&quot;), auto;} </style>

5.    Simpan template anda dan lihat perubahan pada gambar kursor

6.    Jika sobat ingin mengganti gambar kursor dengan gambar yang lain, sobat tinggal ganti URL gambar yang berwarna merah dengan URL gambar pada sample diatas atau sobat bisa langsung browsing sendiri ke TKP di http://www.totallyfreecursors.com/ .

Nah ternyata mengganti gambar kursor di blog memang bisa jadi solusi mempercantik tampilan blog juga ya apalagi kalo ditambahin lagi dengan efek bintang pada kursornya,, siip dah. Tinggal giliran sobat blogger nih, selamat mencoba ya !

Cara Membuat Efek Bintang ( Sprinkle ) Pada Kursor / Pointer Pada Blog

Cara Membuat Efek Bintang ( Sprinkle ) Pada Kursor – Pastinya sobat blogger sudah sering melihat tampilan kursor di blog lain dengan efek bintang yang bertaburan (sprinkle) dan berwarna-warni bukan ? Memang efek bintang bertaburan (sprinkle) pada kursor bisa mempercantik penampilan blog sobat, namun disisi lain juga punya kelemahan yaitu akan memperlambat loading blog akibat efek penggunaan javascript. Namun tidak ada salahnya juga sih kalo memang sobat pengen tampilan blognya keren, silahkan saja untuk mencoba membuat efek bintang bertaburan (sprinkle) ini di blognya.

Cara membuat efek bintang bertaburan pada kursor cukup mudah, sobat blogger tinggal ikuti langkah-langkah seperti dibawah ini :

1.       Login ke dashboard blogger sobat.

2.       Pilih Rancangan > Elemen Halaman > Add Gadget (HTML/JavaScript).

3.       Copy dan paste script dibawah ini pada gadget baru tadi.

<script> // JavaScript Document<script type='text/javascript'> // <![CDATA[ var colour="red"; var sparkles=65; var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var tiny=new Array(); var star=new Array(); var starv=new Array(); var starx=new Array(); var stary=new Array(); var tinyx=new Array(); var tinyy=new Array(); var tinyv=new Array(); window.onload=function() { if (document.getElementById) { var i, rats, rlef, rdow; for (var i=0; i<sparkles; i++) { var rats=createDiv(3, 3); rats.style.visibility="hidden"; document.body.appendChild(tiny[i]=rats); starv[i]=0; tinyv[i]=0; var rats=createDiv(5, 5); rats.style.backgroundColor="transparent"; rats.style.visibility="hidden"; var rlef=createDiv(1, 5); var rdow=createDiv(5, 1); rats.appendChild(rlef); rats.appendChild(rdow); rlef.style.top="2px"; rlef.style.left="0px"; rdow.style.top="0px"; rdow.style.left="2px"; document.body.appendChild(star[i]=rats); } set_width(); sparkle(); }} function sparkle() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<sparkles; c++) if (!starv[c]) { star[c].style.left=(starx[c]=x)+"px"; star[c].style.top=(stary[c]=y)+"px"; star[c].style.clip="rect(0px, 5px, 5px, 0px)"; star[c].style.visibility="visible"; starv[c]=50; break; } } for (c=0; c<sparkles; c++) { if (starv[c]) update_star(c); if (tinyv[c]) update_tiny(c); } setTimeout("sparkle()", 40); } function update_star(i) { if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; if (starv[i]) { stary[i]+=1+Math.random()*3; if (stary[i]<shigh+sdown) { star[i].style.top=stary[i]+"px"; starx[i]+=(i%5-2)/5; star[i].style.left=starx[i]+"px"; } else { star[i].style.visibility="hidden"; starv[i]=0; return; } } else { tinyv[i]=50; tiny[i].style.top=(tinyy[i]=stary[i])+"px"; tiny[i].style.left=(tinyx[i]=starx[i])+"px"; tiny[i].style.width="2px"; tiny[i].style.height="2px"; star[i].style.visibility="hidden"; tiny[i].style.visibility="visible" } } function update_tiny(i) { if (--tinyv[i]==25) { tiny[i].style.width="1px"; tiny[i].style.height="1px"; } if (tinyv[i]) { tinyy[i]+=1+Math.random()*3; if (tinyy[i]<shigh+sdown) { tiny[i].style.top=tinyy[i]+"px"; tinyx[i]+=(i%5-2)/5; tiny[i].style.left=tinyx[i]+"px"; } else { tiny[i].style.visibility="hidden"; tinyv[i]=0; return; } } else tiny[i].style.visibility="hidden"; } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sdown; x=(e)?e.pageX:event.x+sleft; } function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height+"px"; div.style.width=width+"px"; div.style.overflow="hidden"; div.style.backgroundColor=colour; return (div); } // ]]> </script>

4.       Simpan dan lihat hasilnya.

NB : Silahkan ganti warna “red” dengan warna lainnya green, blue, yellow atau warna lain sesuka anda.

Efek bintang bertaburan pada kursor ini akan terlihat jika loading telah selesai. Kalo loadingnya jadi agak lambat ya ditunggu aja yang sabar ya. Selamat mencoba sobat.

Cara Membuat Menu Navigasi Dengan Sub Menu Di Blog

Mumpung mood lagi bagus,mumpung doku lagi tebel dan mumpung blog lagi sepi,saya mencoba untuk memposting kembali kaitannya belajar menghias blog.

Beberapa minggu lalu saya sudah bagikan dari informasi yang saya dapat dari dunia maya,bagaimana membuat menu navigasi css di blogger.
Bagi yang belom membaca,silakan langsung klik disini.

Nah,dari email sahabat yang saya terima,menanyakan bagaimana sih membuat menu navigasi horisontal / horizontal dengan submenu / sub menu navigasi vertikel seperti pada blog ini?
Bukan suatu kesengajaan,menu navigasi dengan sub menu ini juga saya peroleh dari hasil surfing berbagai blog tutorial untuk blogspot.

Bagi kamu yang penasaran bagaimana cara membuat menu navigasi dengan sub menu,bisa ikuti langkah berikkut ini.

Langkah dan Cara Membuat Menu Navigasi dengan Sub Menu Untuk Blogger

• Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.
  
  
  Gb.1
  
• Selanjutnya pilih tab Edit Html (Gb.2).
  
  
  Gb.2
  
• Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3).
  
  
  Gb.3
  
• Setelah itu carilah kode seperti ini ]]></b:skin> (Gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah ketemu letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tersebut.
  
  #NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }
  
• Setelah itu Simpan Templates.
• Sekarang giliran kita menentukan dimana tempat menu navigasi submenu ini akan kita letakkan.
• Pilih Tab Rancangan / Tata Letak pada Dashboard blog anda,seperti (Gb.1),selanjutnya klik tulisan 'Add New Widget / Tambah Gadget'(Gb.4),dan pilihlah Html / Javascript (Gb.5)
  
  
  Gb.4
  
  Gb.5
  
• Setelah itu letakkan kode berikut pada widget HTML / Javascript tersebut.
  
  <div class='menuhorisontal'>
<ul id='nav'>

<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a>
<ul>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'></ul> </li>

<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>

<li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a>
<ul>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
</ul> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
</ul>
</div>
  
• Lalu simpan,selesai dan lihat hasilnya :D

** Untuk http://tulis_alamat_url_tujuan gantilah sesuai tujuan kamu kemana link akan diarahkan,misal;
http://pelajaran-blog.blogspot.com/2009/03/membuat-menu-navigasi-css-di-element.html dan tulisan Ganti Sesuai Keinginan gantilah denga keterangannya,misal dengan keterangan Membuat Navigasi Css dengan Sub Menu,maka dalam penulisannya;
<li><a href='http://pelajaran-blog.blogspot.com/2009/03/membuat-menu-navigasi-css-di-element.html'>Membuat Navigasi Css dengan Sub Menu</a> </li>

Cara Membuat Menu Navigasi CSS Di Elemen Baru

Membuat menu navigasi,adalah pelajaran yang paling banyak di pertanyakan oleh blogger-blogger pemula,termasuk saya beberapa hari yang lalu.

Disini kita akan membahas tentang bagaimana membuat menu makanan 4 sehat 5 sempurna,

Hus !! bukan,maksudnya Menu Navigasi dengan CSS.

Tapi tidak seperti kebanyakan,biasanya mereka meletakkan di bawah kode <body>,tapi di sini kita akan meletakkan kodenya di Element HTML/Javascript yang baru.

Apa itu CSS? kita akan bahas beberapa hari lagi,berhubung yang kita bahas kali ini Menu Navigasinya.

---

Seperti apa sich contoh Menu Navigasi?

Navigasi pada web / blog,sesuai dengan namanya,yaitu untuk menuntun jalan,supaya web / blog lebih mudah di telusuri.

Contoh bentuk fisiknya seperti di bawah ini :

---

• Edit Aku
• Edit Aku
• Edit Aku
• Edit Aku

---

Untuk membuatnya kali ini,kita minta bantuan CSS,apa itu CSS,kita bahas naa..ant :
(,tadi sudah di omongiiin!!!! #$%#!
.

Cara membuatnya sederhana sekali,berhubung kita dengan bantuan CSS,kita tak perlu membuat tabel untuk Menu Navigasi seperti di atas.

Tapi,yang paling surprise buat gw waktu aku jalan-jalan ke Blok-M,tiba-tiba aku ngliat yang belum pernah...OOee!!Ngemeng aja!ntar aja ceritanya ngapa !!

Ok! berhubung ntar malah tambah bikin rusuh suasana,kan dapet dosa tuh!,kalo dosa,kita masuuk Nera...@#$@#$@!!gUBRAK! gw bilang ntar ya ntar ceritanyaaa!!

Ya..ya.ntar aja ceritanya ya..Ok langsung ke topik,kita hari ini.

---

Langkah pertama,pergi ke Dashboard (untuk blogspot),lalu pilih Tata Letak,selanjutnya pilih tab Edit HTML.
Lalu cari kode ]]></b:skin>,jika sudah ketemu,tepat diatasnya,letakkan kode di bawah ini :

---

#NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }

---

Jika kode sudah anda letakkan,lalu Simpan Template.
Selanjutnya pilih Tab Tata Letak,dan buat Element Baru / Add New Widget,pilih HTML / Javascript.
Lalu letakkan kode di bawah ini pada halaman HTML / Javascript yang baru saja anda pilih.

---


<ul id='nav'>
<li><a href='http:///'>Menu 1</a></li>
<li><a href='http:///'>Menu 2</a></li>
<li><a href='http:///'>Menu 3</a></li>
<li><a href='http:///'>Menu 4</a></li>
</ul>

---

Jika kode sudah anda letakkan,lalu pilih Simpan,dan anda bisa langsung lihat hasilnya.

Untuk http:/// ,anda isi dengan alamat URL yang akan di tuju,sedagkan untuk Menu 1,2,3,4 ,Untuk tulisan yang akan tampil,sedangkan jika ingin menambahkan satu kolom lagi,anda tinggal menulis satu baris lagi,baris yang mana?

Copy aja salah satu kode :

<li><a href='http:///'>Menu 4</a></li>,dan paste persis di bawahnya.

Sekarang tinggal nglanjutin cerita di Blok-M tadi,jadi gini nich..@#$@#%$! Gubrak !

Jangan lupa tinggalkan komentarnya zob..!!!

Cara Membuat Widget Blog Bergerak

Setelah mencari-cari gimana cara membuat widget blog bergerak..

akhirnya ketemu juga. Penasarankan gimana caranya..
Ayo sekarang langsung saja ke TKP....!!!!!

Cara Membuat Widget blog bergerak :
Caranya sangat mudah tinggal tambahkan kode script dibawah ini ke tempat
widget yang sobat inginkan

-Ada beberapa pilihan:

- bolak balik kiri-kanan
- bolak balik naik-turun
- dari atas ke bawah nyambung / sebaliknya
- dari kanan ke kiri nyambung / sebaliknya
untuk menggerakannya anda tinggal rubah saja script-nya, nanti saya akan jelaskan:

1. masuk ke blog anda, seperti biasa
2. Masuk ke tab rancangan
3. Nah, buat widget yang ada script-nya di elemen laman, yang berasal bukan asli dari blogger, yang cara penempatannya menggunakan HTML/JAVASCRIPT

ada 2 jenis kode, tinggal pilih

- untuk bolak balik

a. kanan-kiri
<marquee behavior='alternate' align='center' direction='right' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau script gadget disini</marquee>

b. atas-bawah

<marquee behavior='alternate' align='center' direction='up' height='400px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau script gadget disini</marquee>

- untuk yang terus/nyambung

a. dari kanan ke kiri (arah bisa diganti menjadi right)

<marquee behavior='scroll' align='center' direction='left' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau script gadget disini</marquee>

b. dari bawah ke atas (arah bisa diganti menjadi down)
<marquee behavior='scroll' align='center' direction='up' height='400px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau script gadget disini</marquee>

nah tulisan yang berwarna merah diganti dengan script anda/kode anda.

Kecepatan gerak bisa diubah pada scrollamount='2'. dan nilai 1 adalah nilai untuk yang paling lambat.

Cara Mengubah Background Buku Tamu ( Cbox / Shoutmix )

Pada postingan kali ini saya akan share bagaimana cara membuat background pada cbox seperti yang terlihat pada Cbox saya / lihat screenshot disamping. Awal ketertarikan saya membuat background pada cbox ini adalah saat saya berkunjung pada blog sobat "Lintas Suara" dan melihat cboxnya, sejak dari kunjungan itulah saya mulai berfikir bagaimana cara membuat background pada cbox (cie..ciee...berfikir) tapi memang benar-benar saya pikirkan lho...hehehe...

Awalnya saya mengira itu adalah fasilitas dari cbox, ternyata eh ternyata "Te I De A Ka", pada cbox kita hanya perlu settingan warna (dijadiin transparan).
Ya sudah,,saya emang orangnya ga banyak basa-basi... Berikut caranya :
1. بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْم
2. login pada Cbox

3. Pilih >>Look & Fell >>Colours & fonts

4. Pada menu Colours & Fonts silahkan sobat atur warna cbox (hapus kode warna untuk membuatnya transparan)

Klik disini untuk melihat gambar

5. Setelah diatur warnanya klik "Apply"

6. Lihat pada kode cbox sobat untuk mempersiapkan ukuran gambar (berikut contoh kode cbox saya)

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="380" height="180" src="http://www5.cbox.ws/box/?boxid=537363&amp;boxtag=x15zpv&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 1px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="380" height="75" src="http://www5.cbox.ws/box/?boxid=537363&amp;boxtag=x15zpv&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX -->

height= 180
height=   75
-------------+
Total=  255  << tinggi gambar yang harus dipersiapkan (ini contoh pada blog saya)

Sedangkan lebar gambar tidak perlu dijumlahkan seperti diatas >> width=380

7. Setelah Gambar dipersiapkan silahkan upload pada tempat hosting image seperti Picasa atau Photobucket dll.
8. Login Blogger pilih >>Rancangan >>Elemen Laman, dan tambahkan gadget HTML/Java Script
9. Copas kode berikut :

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqMau3DV4UZ6OPnONQ9DViv3W-2DxXjtIPDMjj3cK49c5iDs9bq2XGfq3oyRh_IQ6Mjyo_T6G-Kd7fQTPSvCYcQI7rUA-iyuaWGnCOCGT6Ew9Z7yRqVv-edK7ZnEg1irifnpzqFMTDsFvm/) no-repeat center;">

Kode Cbox Sobat Disini

</div>

Warna biru ganti dengan URL image sobat yang telah diupload

10.Save

Note : "Jika gambar tidak tepat pada tengah cbox silahkan cari gambar/buat gambar sesuai dengan ukuran lebar dan tinggi widget sidebar blog sobat, gambar juga bisa berupa icon animasi dll"
           no-repeat center dapat diganti dengan :

repeat
no-repeat center [Posisi gambar ditengah]

no-repeat center bottom [Posisi Gambar ditengah>>bawah]
no-repeat center left [Posisi Gambar ditengah>>kiri]
no-repeat center top [Posisi Gambar ditengah>>atas]
no-repeat bottom center [Posisi Gambar ditengah>>bawah]

Sekian dulu tips dan trik dari saya. Silahkan sobat kembangkan lagi dengan mencoba-coba pasti bisa..hihi..
"mohon maaf jika ada kesalahan dan jangan lupa beri tau saya"



"Selamat menikmati hidangan cbox barunya...hehehe"

Pengaruh wibiya terhadap traffic Pada Blog / Web

Hati-hati menggunakan Web Toolbar Wibiya untuk blog sobat, bagi sobat yang sering mengunjungi Blog ini tentu sering melihat Toolbar Wibiya di bawah Template, Memang dengan Memasang Tollbar ini Blog nampak Profesional dan Cantik, Namun apa yang terjadi dibalik semua itu?.
Setelah 3 hari saya mencopot Tool ini dari blog tercinta Akhirnya Blog ini Mampu menembus Ribuan Kunjungan Perhari dengan Unik IP berbeda, Ternyata selama ini Toolbar wibiya membuat Blog kita Berat dan malas dikunjungi. Juga kadang membuat Blog kita Hilang dari Peredaran dan tidak bisa di Akses.

Jika Sobat Kurang Percaya, SIlahkan Cek Pada Tool Widget dibawah Blog ini. Dulu waktu masih pasang wibiya Posisi di Blogtopsite paling tinggi 200, Blogtoplist = 150 danTofopBlogs = 130, kini sobat bisa lihat sendiri perbedaannya yang mencolok.

Jadi tujuan saya memposting Artikel ini bukan bertujuan mengajak Sobat mencopot toolbar wibiya dari blog sobat, namun Silahkan Lihat perbedaan diatas. Apakah sayang dengan Penampilan ataukah Pengunjung Anda Lari, itu semua terserah pada diri kita Masing-masing.
Semoga Artikel ini bermanfaat dan membantu rekan-rekan yang belum tahu

Cara Pasang Flag Counter di Blog

Cara pasang Flag Counter atau Counter Flag pada Blog ini saya Posting Karena banyak sekali pengunjung Nyasar dengan kata kunci tersebut lewat mbah google, saya juga heran kenapa bisa begitu padahal saya belum posting cara ini karena sudah banyak blog lain yang membahasnya.

setelah dicari-cari ternyata saya pernah nyentil tentang cara ini pada postingan ini : Cara Mudah Meningkatkan Traffic Pengunjung Pada Blog.
Wahhh Hitung-hitung cari tambahan Visitor tidak ada ruginya saya Posting juga diblog tercinta ini.
Kembali kepokok Judul, lalu Cara Pasang nya bagaimana?, wah sebenarnya gambang banget.hee.. ( Sabar Ya )
Tapi sebelumnya sebaiknya kita bahas dulu apa sih manfaat Counter Flag dipasang pada Blog kita ?.
fasilitas ini dapat membantu kita untuk mengetahui berapa banyak jumlah pengunjung serta asal negaranya yang mampir ke blog kita dan dapat juga menjadi sebuah parameter perkembangan buat suatu blog, tapi ingat pengunjung yang datang untuk kedua kalinya tidak dihitung. Lho Koq bisa ya Counter ini mendeteksi dari mana mereka berasal?, Ya bisalah, karena setiap orang yang Online menggunakan IP Adress, nah inilah yang dideteck oleh Counter ini.
Ini Neh caranya, Ga Sabaran Banget Think heeee

1. Kunjungi dulu alamatnya http://flagcounter.com
   
   
   
   
   
   
   pada create your free counter isikan option-option untuk mengatur tampilan flag counter isikan option-option untuk mengatur tampilan flag counter dan sesuaikan dengan kondisi blog sobat :
   
   
   
   
   
   • maximum flag to show : jumlah bendara yang akan ditampilkan
   • columns of flag : jumlah kolom bendera
   • label on top of counter : nama dari counter flag
   • Background color : warna latar dari counter flag
   • text color : warna tulisan
   • Border color : warna garis tepi dari counter flag
   • show country flag : untuk menampilkan kode negara
   • show pageview : untuk menampilkan jumlah halaman yang dikunjungi
   
   
2. setelah mengatur tampilan counter flag akan terlihat preview pada example flag counter with your choices setelah tampilan sesuai dengan keinginan kita kemudian klik get your flag counter
3. setelah itu copy code yang berada di Code for website Untuk di pastekan ke dashbor blog sobat
4. Login ke Acount Blog sobat, bisa lewat sini blogger.com
   lalu pilih tata letak atau layout. Lalu pilih Elemen halaman atau Page element. Lalu klik tambah Gadget atau add Gadget, lalu pilih opsi HTML/JAVA SCRIPTS setelah itu paste kode HTML Flag Counter yang anda dapatkan tadi. Klik OK dan Save. Jangan Lupa Atur Letaknya sesuai keinginan

Selamat...Counter Blog Sobat sudah Jadi.
Moga Bermanfaat, Posting berikutnya yakni

Cara Muda Meningkatkan Traffic Pengunjung Pada Blog

Cara atau trik ini sangat cocok untuk pemula yang Blog nya masih baru dan kesulitan mendatangkan pengunjung. Kita semua tahu, jika blog tanpa pengunjung akan sia-sialah apa yang anda tulis. Dengan cara ini anda tidak perlu Blog walking, hanya dibutuhkan mendaftar disalah satu Traffik exchange berikut dan ikuti langkah-langkahnya, maka kunjungan sudah pasti datang ke blog anda.

Namun sebelum Mendaftar sebaiknya anda Pasang Flag Counter dulu diblog sobat, fungsinya untuk membuktikan Betul atau tidak ada pengunjung yang datang. Cara Pasang flagcounter pada blog ( Menyusul) ( maaf Untuk Pemula ), Gampang koq tinggal Kesini http://flagcounter.com
lalu pasang di Blog sobat.
Lanjut..........Sob
Logika nya di Traffic excange anda diminta Klik Blog orang lain dan anda akan dapat klik balasan, biasanya oleh pemilik Traffic Excange Rasio nya 2 banding 1 ( 2: 1 ) artinya anda Klik 2 blog balasannya anda dapat 1 kali klik.
Daftar dulu Yuk.. Langsung Klik Link Berikut

http://www.zuminsurf.com

Caranya seperti ini

Klik ReGister yg diberi Panah Merah, sobat akan dibawa kehalaman ini :

Isi Username dan Email sobat lalu Klik Daftar
Segera Buka Email Konfirmasi lalu Klik Link Verivikasinya seperti Gambar di bawah

Lalu Sobat Tercinta akan dibawa ke halaman Login, silahkan Login Dengan Alamat Email dan Password yang diberikan Tadi

Lalu akan menuju Halaman Member ARea, UntuK mUlai Silahkan Isi dulu Blog Sobat Dengan Mengklik Website Saya

Untuk Mulai Surf atau Klik Blog Milik Orang lain silahkan Klik Surfing dan anda akan masuk halaman berikut, Masukkan Kode Capcha diats, Lalu Klik seperti Warna Yang ada, contoh yg ditunjuk panah Merah

SObat Menunggu beberapa detik untuk bisa Klik lagi. begitu seterusnya.
Misalkan Sobat sehari 100 klik maka hari tersebut Blog sobat akan dikunjungi 50 Visitor, untuk memperbanyak Jumlah Klik segera cari Reffral.
Waduh... Cape.... sampai disini dulu jika ada pertanyaan Monggo di Komentar.


DAFTAR traffic exchange lainnya ( Lebih Banyak Lebih Bagus )
Cara Agak berbeda sedikit Namun Kebanyakan Sama.
http://iklanane.com
http://trafficchampions.com
http://www.acebiztraffic.com
http://www.trafficwitch.com


SEMOGA BERMANFAAT..
eeiitsss...!! Jangan lupa komentarnya..!!!

Cara Memasang Tombol Rate / Vote Favorite Bintang 5 di Blog

Widget Miniatur Outbrain ini sangat menarik, dan bisa kita dapatkan secarta gratis. Disamping kita bisa menampilkan tombol bintang yang berfungsi sebagai tombol rekomendasi pada pengunjung untuk memberi penilaian pada artikel kita, Widget Miniatur Outbrain ini juga dilengkapi fitur Related Post atau Link terkait dan kita bisa memilih tampilan Related Post atau Link terkait tersebut dalam bentuk hanya Link yang tampil atau kita pilih gambar beserta description yang tampil seperti pada blog ini.
Cara menginstalnya sangat sederhana dan secara otomatis akan menyesuaikan tampilan dan nuansa web atau blog kita, dan tampil secara otomatis pula dibawah posting artikel kita. Silahkan anda lihat contohnya dibawah artikel ini.

Bila anda berminat silahkan anda bisa ikuti langkah - langkah dibawah ini :
1. Silahkan anda Daftarkan Blog anda di www.outbrain.com

2. Verifikasi Email, silahkan klik link yang diberikan lewat email.
3. Klik tab "Get Blog Widgets"

4. Pilih Platform.

5. Ikuti gambar berikut :

6. Kemudian, anda diarahkan ke blogger.com untuk Login:

7. Berikutnya :

8. Widget sudah ditambahkan:

Catatan : 

Anda bisa pindah widget tersebut kebagian bawah, atau dibiarkan saja...

9. Silahkan kembali ke Outbrain.com dan masuk ke Dashboard

10. Pada halaman berikutnya, silahkan anda seting tampilan sesuai selera anda dan SIMPAN :

11. Buka Blog anda dan Refresh..... jadiiii.......

OK..., Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

SEMOGA BERMANFAAT...

Cara Membuat Kotak Scroll Bar Dalam Postingan Blog

Ketika kita ingin menulis artikel postingan yang isinya cukup panjang, maka sebaiknya kita buat scroll bar supaya tidak memakan space atau ruang pada halaman blog. Sekarang saya akan sharing Cara membuat scroll Bar pada posting blog.
Karena Cara membuat scroll Bar ini sangat berguna sekali disaat kita melakukan posting blog misalkan dengan kode yang super panjang
Caranya sangat simple dan mudah.
Pada waktu mau menulis artikel copas aja kode di bawah ini kedalam postingan anda, hanya saja caranya harus menulis dalam format HTML seperti gambar di bawah ini :

<div style="overflow:auto;width:450px;height:130px;padding:10px;border:1px solid #eee">

LETAKKAN TULISAN , GAMBAR ATAU APAPUN DISINI

</div>

note : Tulisan yang berwarna merah bisa anda ganti sesuai dengan keinginan anda..!!

Ini contoh scrollbarnya:

Ketika kita ingin menulis artikel postingan yang isinya cukup panjang, maka sebaiknya kita buat scroll bar supaya tidak memakan space atau ruang pada halaman blog. Sekarang saya akan sharing Cara membuat scroll Bar pada posting blog.


Karena Cara membuat scroll Bar ini sangat berguna sekali disaat kita melakukan posting blog misalkan dengan kode yang super panjang


Caranya sangat simple dan mudah.


Pada waktu mau menulis artikel copas aja kode di bawah ini kedalam postingan anda, hanya saja caranya harus menulis dalam format HTML seperti gambar di bawah ini :

Jika sudah selesai menulis, coba dicek dulu dengan klik COMPOSE.. apabila sudah benar, anda bisa langsung mempublikasikan postingan anda.


SEMOGA BERMANFAAT