Menampilkan Jumlah Pengunjung Yang Online Di Dalam Blog

cara menampilkan jumlah pengunjung online 
seperti situs www.marganda.tk 

Jawaban:

Langkah 1:
Silakan copy kode berikut:

<script src='http://radarurl.com/js/radarurl_widget.js' type='text/javascript'></script><script type='text/javascript'>radarurl_call_radar_widget("Small", "Orange","bottomright")</script><noscript><a href='http://radarurl.com/'>online stats</a></noscript>

Langkah2
Solusi 1

1. Login Blog > Rancangan > Edit Template
2. Simpan kode yang kang salman berikan diatas
3. Simpan


Solusi 2

1. Login Blog > Rancangan > Tambah > Widget HTML/Javascript
2. Paste kode yang kang salman berikan
3. Save


Keterangan:
Pada tulisan berwarna orange di atas bisa kita ubah menjadi red, greed, dan black. sesuaikanlah dengan warna kesukaan kamu.

Selamat mencoba, trik menampilkan jumlah pengunjung yang online di blog kita. dan
Salam sukses selalu.

READMORE....!!

Read More......

Meletakkan Iklan Di Akhir Postingan

Dengan Meletakkan Iklan Di Akhir Posting Blog earning / pendapatan dari PPC baik adsense maupun kliksaya dll akan meningkat, mengapa? karena pengunjung potensial atau awam akan mengira itu adalah bagian dari artikel atau artikel berkaitan lainnya sehingga peluang klik akan menjadi lebih besar, trik ini banyak di bahas di internet baik melalui video youtube maupun di berbagai forum tenar seperti adsense-id.com Bagaimana cara meletakkanya?

1.  Login ke Blogger » Klik Rancangan » Pilih Tab Edit HTML » Centang Expend Widget

2.  Silakan cari kode ini <data:post.body/>
Jika anda menemukan 2 kode yang sama, maka pilihlah yang kedua

3.  Selanjutnya silakan tempatkan kode iklan tersebut tepat di bawah <data:post.body/>
Silakan lihat contoh berikut :

<data:post.body/> < -kode iklan ->

READMORE....!!

Read More......

Menu Profil Facebook, Twitter, and RSS melayang di blog

Menu Profil Facebook, Twitter, and RSS melayang di blog saat ini yang akan saya posting. Anda dapat melihat pas disebalah kanan bawah paling pojok. Nie terinspirasi dari kaskus and para pemilik2 blogger yang lain walaupun tidak percis dengan yang dimiliki lainnya. Jadi semoga disaat anda mencobanya anda tertarik dan menyukai posting yang saya berikan ini.

Demonya bisa Anda lihat di samping kanan artikel ini disana ada 2 jejaring sosial dengan RSS yang mengikuti arah scrool. Dan di bawah ini kodenya:

<div style="display:scroll; position:fixed; bottom:80px; right:0px;"><a class="linkopacity" href="http://www.facebook.com/pages/GaNsFoX/163266543740006" target="_blank" rel="nofollow" title="Add me your facebook" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://fixphotoworks.com/wp-content/uploads/2011/03/facebook-handdrawn-48x48.png" /></a><br /><br /> <a class="linkopacity" href="http://twitter.com/gansfox" target="_blank" rel="nofollow" title="Add me your Twitter" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://bigbrother-blog.com/wp-content/themes/thesis_18/lib/images/twitter.png" /></a><br /><br /> <a class="linkopacity" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtnTNEZ39JTSE2oba0UO3uqkSqqseFKP0ogY90F5c5efwpiySxzw6D_is42apruLtenWVi8eUKdsYGxTIcQtBD3N4sDYCdBao50v1eaSfIHs-x2tQXiU6mldHJM3J20s8Evdz7JqJQ7RQm/" target="_blank" rel="nofollow" title="Newslater" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i239.photobucket.com/albums/ff304/cxoluvme/feed.png" /></a><br /><br /> </div>

READMORE....!!

Read More......

How To Create Rainbow Link On in Blogger

How To Create Rainbow Link On in Blogger - To beautify the blog there are many ways one of which is to change the look of the link. At this time I will share the tricks to make a rainbow link on blogspot.

1. Login to Blogger
2. select design
3. Click the Edit HTML Tab
4. Find Code Here </ head>
5. Tambakan this code before </ head>

<script language="javascript" src="http://zianxfly.250free.com/js/linkpelangi.js"></script><br />
6. Save Template

Okay so easy guys? Good luck Rainbow link on Blogspot.

READMORE....!!

Read More......

Cara membuat Recent / Related Post JQuery (Berkedip Bergantian dan Slider

Setelah beberapa hari kemarin kami saling sharing seputar belajar seo blogspot,kini saatnya kembali utak atik blog seputar tutorial jquery kembali.

Ketinggalan terlalu banyak materi jquery dalam blog ini?,jangan kuatir sob,tutorial blog ini baru memposting beberapa posts kok :D

Sebelum posting tentang bagaimana membuat recent post jQuery ini,biar kami share kembali beberapa tutorial jQuery dalam blog ini beberapa waktu lalu,diantaranya:

Nah,belum terlalu banyak khan sob,sedot buruan ya :D

Langkah Cara Membuat Related Post / Recent Post jQuery untuk Blogger

Bagi yang masih bingung seperti apa sih related post yang dimaksudkan,sobat bisa lihat contoh gambarnya dibawah ini:

Contoh yang sudah diterapkan sobat bisa lihat di sini.
Gimana sob,pingin ga punya widget kaya gitu?yuk intip gimana sih cara bikin recent post jquery blogger ini..

Pertama langkahnya seperti biasanya ya hanya pilih Dashboard,lalu Tata Letak / Rancangan kemudian klik tulisan Add New Widget atau Tambah Gadget dan pilih HTML/Javascript,lihat Gambar:

.

Kemudian letakkan kode berikut sob:


<script src="http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"></script><center><strong>Artikel Acak</strong></center>
<center>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:1px;
padding:0px 0px;
height:300px;
}
#spylist ul{
width:100%;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:100%;
padding: 0px 0px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
width:100%;
font-size:10px;
height:12px;
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:8px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:12px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

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

-->
</style>

<script language='javascript'>

imgr = new Array();

imgr[0] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

imgr[1] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

imgr[2] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

imgr[3] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

imgr[4] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";
showRandomImg = true;

boxwidth = 200;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 50;

thumbheight = 50;

fntsize = 9;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 100;

home_page = "http://www.marganda.tk/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/recentpostthumbspy-min.js' type='text/javascript'></script>
</div></center>

Lalu Simpan dan sobat dah bisa lihat hasilnya :D
(klo ada keluhan sobat bisa komentar pada Facebook Fan Page-nya ya)

**Ket
- untuk :
Artikel Acak gantilah dengan judul widget jQuery related post ini.
- untuk :
http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox gantilah dengan url gambar default (gambar ini akan muncul saat sebuah posting tidak mengunggah sebuah gambar)
- untuk :
http://www.marganda.tk/ gantilah dengan alamat url blog sobat.
-untuk :
yang lain,pr aja ya,kabuuuuuuuuuur!

READMORE....!!

Read More......

Rahasia Teknik Seo dalam Cara Ampuh Agar Breadcrumbs Dapat Terindex Google

Disaat google sedang pelit dalam mengindex blogspot akhir-akhir ini,sobat pasti mencari teknik seo agar blogger yang sobat miliki masih bertahan untuk dapat terindex di paman Google ini.
Pasalnya,tahun 2011 ini paman kita gugel sangat berhati-hati dengan flatform blogspot.

Seakan iri melihat blog-blog master seo yang memiliki breadcrumb/breadcrumbs yang dapat terindex di Google.

Lihat screenshot gambar dari blog sahabat saya yang breadcrumb-nya dapat terindex google berikut ini:

Di blog teknik seo blogger ini sendiri memang sulit meiliki breadcrumb yang dapat terindex seperti itu,tapi setelah posting ini mudah-mudahan breadcrumb pada blog tutorial ini dapat cepat terindex.

Nah,dalam kiat seo blogger template kali ini,kita akan membahas masalah ini sob,yup! bagaimana trik dan teknik agar blogger templates yang kita miliki seo friendly dengan optimasi dari breadcrumbCara Membuat Breadcrumb Seo Friendly

Bagi sobat yang belum membuat breadcrums sebaiknya sobat bikin dulu ya,dan beruntung jika sobat belum membuatnya,karena breadcrumb seo friendly ini,akan kita ciptakan sore hari ini.

Pertama,pastikan anda sudah membuat label pada blog.
Selanjutnnya,pergi ke Dashboard,lalu pilih Tata Letak dan kemudian pilih Edit HTML,jangan lupa contreng tulisan Expand Widget Templates.
Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):

]]></b:skin>

Setelah ketemu,letakkan kode berikut tepat diatasnya:

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

Nah,setelah itu,sobat cari lagi kode seperti ini (ketik aja di Ctrl+F)

<div class='post hentry

Nah nanti sobat akan temukan barisan kode seperti:

<div class='post hentry uncustomized-post-template'>

Nah,tepat dibawah kode tersebut,sobat letakkan kode ini:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

Setelah itu simpan templates sobat.

READMORE....!!

Read More......

Cara membuat breadcrumbs / menu navigasi diatas artikel postingan

Membuat Breadcrumb Menu Pada Blog

cara membuat breadcrumbs / menu navigasi diatas artikel postingan atau istilahnya disebut breadcrumbs ,merupakan cara efektif untuk memberikan kemudahan pengunjung dalam melihat kategori posting suatu blog.

Disamping itu dari segi seo(search engine optimization),Google sudah support/mendukung breadcrumb ini.
Untuk melihat hasil dari sebuah blog yang sudah  cara membuat breadcrumbs / menu navigasi diatas artikel postingan bisa lihat gambar.

---

---

Atau bisa kunjungi situs teman saya langsung di blog latihan seo nya.
Untuk membuatnya kita bisa menggunakan script ciptaan hoctro di hoctro.blogspot.com
Saya ingin menjabarkannya kembali langkah cara membuat breadcrumbs / menu navigasi diatas artikel postingan ini dalam bahasa Indonesia.

Langkah Cara Membuat Breadcrumb Pada Blogger

1. Pertama,pastikan anda sudah membuat label pada blog.
2. Selanjutnnya,pergi ke Dashboard,lalu pilih Tata Letak dan kemudian pilih Edit HTML,jangan lupa contreng tulisan Expand Widget Templates.
3. Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):

   ---

   <b:includable id='main' var='top'>

   ---

4. Setelah ketemu,letakkan breadcrumb script berikut tepat diatasnya.

   ---

   <b:includable id='breadcrumbs' var='post'>

<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
  <b:if cond='data:blog.pageType == "item"'>
      <p class='breadcrumbs'>
      <span class='post-labels'>
        <b:if cond='data:post.labels'>

          Browse:
          <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  &gt;
          <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == "true"'>
              <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
            </b:if>
          </b:loop>
          <b:if cond='data:post.title'>
&gt;  <b><data:post.title/></b>
          </b:if>

        </b:if>
      </span>
      </p>
  </b:if>
<!-- End of Breadcrums Hack -->
</b:includable>

   ---

5. Kemudian,carai lagi kode berikut:
   

   ---

   <b:if cond='data:post.dateHeader'>

   ---

6. Jika sudah ketemu,letakkan kode dibawah ini tepat diatasnya.

   ---

   <b:include data='post' name='breadcrumbs'/>

   ---

7. Nah,sekarang cari kode ]]></b:skin>,jika sudah ketemu letakkan barisan kode css breadcrumb dibawah ini tepat diatasnya.

   ---

   .breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

   ---

8. Kemudian Simpan Templates dan Selesai.

READMORE....!!

Read More......

Membuat Label/Kategori

Beruntung,blog saya ini tergolong baru karena peluncuranya belum ada satu tahun.
Terus apa hubunganya baru sama Membuat Label?

Ya..karena fitur Blogspot hampir semua sudah WYSWYG,termasuk cara membuat Label / Kategori pada Blog.

---

Untuk membuatnya,yang pastinya anda sudah mempunyai beberapa artikel / posting yang sudah anda publikasikan.

Pada,setiap artikel yang telah anda publikasikan,jika anda belum menuliskan Label pada setiap artikel,sebaiknya anda Edit lagi,artikel yang telah anda publikasikan tadi.
Jika anda belum tahu menuliskan label pada setiap postingan / artikel,coba ikuti langkah berikut:

Pertama,bagi yang mau mengedit untuk menuliskan Label pada artikel,cari artikel yang ingin di Edit.

Untuk mencari artikel mana yang ingin di Edit,pergi ke Dashboard,pilih Edit Entri,blog yang ingin anda masukkan Label.

Bila anda sudah menentukan artikel mana yang ingin di beri label,pilih artikel tersebut,lalu lihat di sebelah kanan bawah halaman posting,anda hanya disuruh menuliskan nama label yang ingin anda tentukan,
contoh Kesehatan,dll,lalu selanjutnya publikasikan.

---

Selanjutnya,untuk menampilkan label-label tersebut pada halaman blog,pegilah ke Tata Letak,lalu pilih Element Baru / Add New Widget.
Pilih Label,dan beri judul sesuai keinginan anda,contoh;Tags,Label,Kategori atau yang lain.
Lalu Simpan.

READMORE....!!

Read More......

Cara Membuat Twitter Follow Burung Terbang (bird Sprite) pada BlogGer aNDa

Hallo Sobat Edit-HTML, kali ini saya akan menjelaskan bagaimana cara membuat twitter Follow dengan gaya burung yang terbang ke seluruh halaman blog sobat, cukup mudah dan sangat praktis namun tetap kreatif, inilah langkah-langkahnya:

Blogger Dashboard > Layout > Page Element > Add a Gadget > HTML/JavaScript

Kemudian Copykan Code dibawah ini ke HTML/JavaScript yang telah terbuka

<div class="widget-content"><script type="text/javascript" src="http://techgyo.com/wp-content/FlyingTwitbird/tripleflap.js"></script><br /> <script type="text/javascript"> var birdSprite="http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/akuntwittermu";var tweetThisText = "Twitter - kamu http://www.alamatblogmur.blogspot.com/";tripleflapInit(); </script><br /> <a id="theBird" href="http://twitter.com/akuntwittermu" target="_blank" style="display: block; position: absolute; width: 64px; height: 64px; background-image: url("http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png"); background-color: transparent; z-index: 947; left: 28px; top: 97px; background-position: 0px 0px;"></a><br /> <a id="theBirdLtweet" href="http://twitter.com/home?status=Twitter%20-%20techgyo%20http%3A//www.alamatblogmu.blogspot.com/" target="_blank" title="tweet this" style="position: absolute; background-image: url("http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png"); background-color: transparent; width: 58px; height: 30px; z-index: 951; left: 49px; top: 583px; display: none; opacity: 0; background-position: -64px 0px;"></a><br /> <a id="theBirdLfollow" href="http://twitter.com/akuntwittermu" target="_blank" title="follow me" style="position: absolute; background-image: url("http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png"); background-color: transparent; width: 58px; height: 20px; z-index: 952; left: 54px; top: 613px; display: none; opacity: 0; background-position: -64px -30px;"></a><br /> </div>

READMORE....!!

Read More......

Cara Membuat Text Area Part II

Pada Postingan saya kali ini akan Menerangkan Cara Membuat Text Area Part II. Kenapa saya beri judul Cara Membuat Text Area Part II, karena pada postingan saya sebelumnya saya sudah menerangkan Cara Membuat Text Area. Nah skarang ini adalah lanjutan nya dari pada Cara Membuat Text Area yang Pertama. Di postingan kali ini akan  saya memberi pilihan untuk text area,silahkan anda lihat sendiri di bawah. Ada beberapa macam text area yang saya posting. Jika kalian mengerti masih banyak lagi cara yang anda dapat lakukan, atau anda bisa juga membuat kreasi text area buatan anda sendiri. Silahkan anda sekalian mencopy berbagai macam text area yang saya posting di dalam ini...

<textarea name="code" rows="3" cols="20" style="background:#BFFAFF; color:#FF0000; border-bottom: 4px solid #40FF1F; border-right: 4px solid #40FF1F; border-top: 4px solid #FFE900; border-left: 4px solid #FFE900; line-height:1.5em; padding:5px; -moz-border-radius:10px;"> ISI TEXT/KODE<br />

<textarea name="code" rows="3" cols="20" style="background:#DAFFBF; color:#295F00; border:2px #295F00 dashed; line-height:1.5em; padding:5px;"> ISI TEKS AREA SOBAT DISINI <br />


<textarea name="code" rows="3" cols="20" style="background: #000; color: #fff; border: 2px inset #ccc; line-height: 1.5em; padding: 0 7px; -moz-border-radius: 5px;">ISI TEKS AREA SOBAT DISINI


<textarea name="code" rows="3" cols="20" style="background: #EF0090; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding: 5px;"> ISI TEKS/KODE


<br /><br /><textarea name="code" rows="3" cols="20" style="background:#FF000A; color:#fff; border:3px double #ffaf; line-height:1.5em; padding:5px;"><br />ISI TEKS AREA SOBA DISINI


<textarea name="code" rows="3" cols="20" style="background: #FBEFFF; color: #CA3DD9; border: 1px solid #CA3DD9; border-left: 20px solid #CA3DD9; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;"> ISI TEKS AREA SOBAT DISINI


<textarea cols="20" name="Bptxt" rows="3" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-box-shadow: 5px 0px 8px rgb(129, 129, 129); background: white none repeat scroll 0% 0%; border-left: 20px solid red; color: black; line-height: 150%; padding: 5px;">simpan tulisan anda di sini


<textarea name="code" rows="3" cols="20" style="background: #FFDAAF; color: #7F4500; border: 2px ridge #7F4500; line-height: 1.5em; padding: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;"> ISI TEKS AREA SOBAT DISINI


<textarea name="Bptxt" rows="3" cols="20" style="background:yellow; color:black;border-left: 20px solid red; line-height: 1.5em; padding: 5px;-webkit-box-shadow: 5px 5px 8px #818181;<br />-moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px; ">Tulis text ataupun kode-kode yang anda ingin tampilkan di sini

Sobat Bisa Copy Kode-kode nya...
Selamat Mencoba Semoga Bermanfaat


Saran Dan Kritik Anda Sangat Membantu Saya Dalam Menulis Artikel Selanjutnya Pada Tutorial Blog Ini...

READMORE....!!

Read More......