Home » Posts filed under TUTORIAL BLOG
Tampilkan postingan dengan label TUTORIAL BLOG. Tampilkan semua postingan
Tampilkan postingan dengan label TUTORIAL BLOG. Tampilkan semua postingan

Senin, 26 Maret 2012

Cara Mudah memasang meta tag otomatis pada postingan blog atau website

17.07  , ,  1 comment


meta tag adalah salah satu cara agar supaya apa yang kita posting dalam blog atau website dapat dengan mudah dan cepat terdeteksi oleh search engine... nah untuh mesasang meta tag tersebut bukanlah hal yang sulit, caranya cukup mudah.. untuk lebih jelasnya simak caranya  berikut ini..


begini caranya..

langsung masuk ke bagian design, lalu edit html pada blog, centang expand template widget..


nah cari kode ini dengan menggunakan ctrl +f : 
<title><data:blog.pageTitle/></title>


lalu ganti dengan ini...





<b:if cond='data:blog.url == &quot;http://www.bekompas.blogspot.com/&quot;'>
<title><data:blog.pageTitle/></title>
<meta name='DESCRIPTION' content='Teknologi, Islam,  KUMPULAN, INFORMASI ,TENTANG BLOGING, INFO UNIK, DAN, ILMU PENGETAHUAN, Tutorial,'/>
<meta name='KEYWORDS' content='teknologi, KUMPULAN, INFORMASI ,TENTANG BLOGING, INFO UNIK, DAN, ILMU PENGETAHUAN ibadah, daftar isi, tukar link, home, kompas, terselubung, twitter, blackberry, indonesia, inggris, jawa, seni, budaya, tik, surat, puisi, pidato, trik, bisnis, otomatis, fakta, opini, pengobatan, tradisional, sejarah, pkn,  herbal,  widget, cerpen, peluang, banner, sahabat, biografi, tokoh, mitra, pengaturan,  pengusaha, tips komputer, pemrograman, info terbaru, laptop, tutorial, islam, trik dan tips seo,  cara mudah, tutorial blog, seo, agama, pascal, berita terbaru, jilbab, wanita, akhlak, aqidah, google, facebook, cara membuat, amazon, keutamaan,tips sehat, obat'/> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/>
</b:if>

nah demikianlah   cara memasang meta tag pada blog  semoga bermanfaat, dan yang berwarna merah silahkan ganti dengan  punya anda ...

Wirausaha
Kontak Jodoh
1.
Read More

Minggu, 01 Januari 2012

Cara Membuat Cursor Berbintang

07.33  ,  No comments
Cara mempercantik cursor (pointer mouse), pada blog berplatform blogspot, yg mana kita tahu blog ber-platform blogspot memang cocok buat para blogger yg tidak ingin bersusah payah untuk mempercantik blognya, karena terbilang mudah dalam proses pembuatannya.
Untuk mempercantik suatu blog biasanya menggunakan javascript yg harus di tempatkan pada template maupun pada widget.
Yang akan di bahas di bawah ini oleh Blogtegal yakni
cara membuat cursor berbintang


Berikut langkah-langkah membuat cursor berbintang.
  • copy dan pastekan script-script di bawah ini pada widget javascrit/HTML.
  • cursor bintang warna merah
    <script src="http://blogtegal.googlecode.com/files/cursor_merah.js" type="text/javascript"/>
  • cursor warna hijau
    <script src="http://blogtegal.googlecode.com/files/cursor_hijau.js" type="text/javascript"/>
  • cursor warna biru
    <script src="http://blogtegal.googlecode.com/files/cursor_biru.js" type="text/javascript"/>
  • cursor warna ungu
    <script src="http://blogtegal.googlecode.com/files/cursor_ungu.js" type="text/javascript"/>
  • cursor warna putih
    <script src="http://blogtegal.googlecode.com/files/cursor_putih.js" type="text/javascript"/>
  • Jika anda newbie dan kurang jelas dalam memasukan script-script di atas, boleh lah Blogtegal berbagi caranya.
    • login ke dashboard blog anda.
    • pilih Rancangan
    • pada halaman elemen laman pilih tambah gadget
    • pilih widget HTML/JAVASCRIPT
    • lalu pastekan salah satu script di atas.
    • klik ''simpan'' selesai.
1.
Read More

Cara membuat Related Post ( artikel / postingan terkait )

07.31  ,  No comments
Related Post atau yang biasa disebut posting terkait atau artikel terkait sangat besar manfaatnya untuk blog kita,terlebih utama sangat besar manfaatnya untuk para pengunjung karena Artikel yang besangkutan dengan apa yang pengunjung baca ada pada menu Related post ini, dan biasanya Artikel terkait ini di letakan di bagian bawah artikel guna memberitahu pengunjung bahwa artikel yang sama yg sedang di baca ada di bawahnya.Related Post ini seperti menu navigasi pada sidebar blog, hanya saja menu related post ini terisi secara otomatis berdasarkan Label pada masing-masing artikel.
Misalkan article yang sedang di baca pengunjung tentang ''Cara sukses berbisnis online dengan Blog'' yang di beri Label ''BISNIS ONLINE'', maka artikel terkait secara otomatis akan menampilkan Artikel-artikel yang lainnya tentang BISNIS ONLINE.
Contoh Related Post atau Posting Terkait bisa di lihat pada Blogtegal ini di bagian bawah artikel yang sedang kamu baca ini. BAGAIMANA CARA MEMBUAT RELATED POST INI? Mari kita lakukan penelitian membuat artikel terkait. CARA MEMBUAT RELATED POST,CARA MEMBUAT POSTING TERKAIT,CARA MEMBUAT ARTIKEL TERKAIT
  • Login ke dashboard blogspot kamu.
  • pilih Rancangan »» Edit HTML
  • download template lengkap dulu untuk jaga-jaga kalau ada kesalahan.
  • Beri tanda centang pada Expand Widget Template.
  • tempatkan script berikut di bawah kode <data:post.body/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='similiar'>
    <div class='widget-content'>
    <h3>Related Posts by Categories</h3> <div id='data2007'/>

    <script type='text/javascript'> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement(&#39;ul&#39;); var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i &lt; maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == &#39;alternate&#39;) { alturl = entry.link[k].href; break; } } var li = document.createElement(&#39;li&#39;); var a = document.createElement(&#39;a&#39;); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l &lt; json.feed.link.length; l++) { if (json.feed.link[l].rel == &#39;alternate&#39;) { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;); var txt = document.createTextNode(label); var h = document.createElement(&#39;b&#39;); h.appendChild(txt); var div1 = document.createElement(&#39;div&#39;); div1.appendChild(h); div1.appendChild(ul); document.getElementById(&#39;data2007&#39;).appendChild(div1); } } } function search10(query, label) { var script = document.createElement(&#39;script&#39;); script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39; + label + &#39;?alt=json-in-script&amp;callback=listEntries10&#39;); script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = &quot;<data:label.name/>&quot;; var test = 0; for (var i = 0; i &lt; labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel &lt; maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> </div> </b:if>
  • yang terakhir klik SIMPAN
CATATAN!!:
  • Jika kamu sudah memasang 'Readmore Otomatis' maka kamu harus menempatkan script related post di bawah kode
    <data:post.body/>
    </b:if>
  • Jika kamu memasang iklan di bawah posting, maka tempatkan script related post di bawah kode iklan tersebut.
1.
Read More

Cara membuat efek salju pada blog

07.14  ,  No comments

        Kalau tidak salah di Eropa sekarang ini menjelang musim salju, tapi kita tidak membahas tentang musim salju, tapi membahas bagaimana cara membuat salju bertaburan di blog. Tidak seberapa penting, tapi setidaknya bagus untuk menghiasi blog. Untuk sobat yang tertarik untuk mencoba, berikut beberapa langkah mudah membuat efek salju pada blog :

1. Login pada blog sobat

2. Rancangan >> Add Gadget >> pilih yang java script / Html

3. Copy code script dibawah dan paste di kotak tadi , untuk judulnya kosongkan saja.

<script src="http://masterendi.googlecode.com/files/salju.js"></script>

4. Save Gadget

Bagaimana, apa blog sobat sudah bertaburan salju?
1.
Read More

Cara membuat widget atau sidebar blog menjadi dua kolom

07.10  ,  1 comment
Membuat widget atau sidebar blog menjadi dua kolom maksudnya adalah seperti kasus blog saya ini, sobat bisa perhatikan bagaimana saya membuat satu widget menjadi dua bagian, dengan demikian  bisa membuat sidebar blog lebih hemat dan sedikit rapi.
Sobat tertarik ingin mencoba? lanjutkan..

Membuat membuat widget atau sidebar blog menjadi dua kolom sangat mudah, sobat hanya perlu menambahkan sedikit kode html. Tenang, saya tidak mengajarkan html karena sobat pasti tidak mau, yang penting bagaimana bersihnya. hehe..

Nah, dalam widget tersebut saya menambahkan kode tabel sehingga menjadi dua kolom dan diikuti script widgetnya. Adapun langkah - langkah pembuatan yang saya lakukan seperti sidebar blog saya ini adalah :

1. Pastinya sobat login ke blog --> Rancangan --> Add Gadget --> Pilih HTML/JavaScript

2. Copy kode-kode HTML berikut :
<table border="0" width="300">
<tr bgcolor="#FF6C74"><td align="center"><b>JUDUL 1</b></td><td align="center"><b>JUDUL 2</b></td></tr>
<tr><td align="center">KODE JUDUL 1 DISINI</td><td align="center">KODE JUDUL 2 DISINI</td></tr>
</table>
<table border="0" width="300">
<tr bgcolor="#FF6C74"><td align="center"><b>JUDUL 3</b></td><td align="center"><b>JUDUL 4</b></td></tr>
<tr><td align="center">KODE JUDUL 3 DISINI</td><td align="center">KODE JUDUL 4 DISINI</td></tr>
</table>

Keterangan :
  • Perhatikan kode warna merah, angka 300 adalah lebar tabel. Sobat sesuaikan dengan lebar sidebar blog.
  • Kemudian kode warna biru adalah untuk judul-judulnya, sobat bisa ganti sesuai keinginan sobat disini saya menggunakan 'statistik' dan 'alexa' SERTA 'pagerank' dan 'rantop'.
  • kode yang ditandai dengan warna kuning tersebut adalah backgrounnya silahkan ganti dengan warna yang sesuai dengan warna blog sobat. 

3. Paste di dalam kotak HTML/JavaScript tadi.

4. Selesai, dan Save..
1.
Read More

Menampilkan Widget di Halaman Tertentu Saja

07.06  ,  No comments
Pada kesempatan kali ini Bekompas akan men-share tentang bagaimana cara menampilkan widget di halaman posting saja dan bagaimana cara menampilkan widget di homepage saja atau lebih tepatnya menampilkan widget di halaman tertentu saja untuk blog yg masih berplatform blogspot, alias blog gratisan wkwkwkwkwk. . .Mengapa harus di tampilkan di homepage atau di halaman posting saja? ? ? Selain untuk merapihkan letak-letak widget kita agar enak di lihat oleh pengunjung, trik ini juga termasuk salah satu trik menjadikan blog SEO Friendly yg mana widget yg tidak perlu di tampilkan pada halaman posting kita tempatkan pada homepage blog kita, atau di halaman lain yg kita inginkan seperti widget penggemar,shoutbox dll.
Untuk melakukannya silahkan ikuti petunjuk Blogtegal dg baik dan jangan ngelamun hokey. . .

  1. Login ke dashboard blogger.
  2. pilih Rancangan »» edit HTML
  3. Beri tanda centang pada tulisan Expand Template Widget
  4. Lalu cari kode widget yg akan di tampilkan pada halaman tertentu.
    Caranya cari nama judul pada widget tersebut menggunakan tombol F3.
    untuk mempermudah pencarian kode widget, sebaiknya widget yg akan di edit di beri judul dulu.
    Untuk contohnya Blogtegal akan mengedit dan menampilkan widget iklan Adsense hanya pada halaman posting saja dengan judul widget bernama iklan adsense.contohnya

    <b:widget id='HTML1' locked='false' title='iklan adsense' type='HTML'>
    <b:includable id='main'>
    <!-- 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:include name='quickedit'/>
    </b:includable>
    </b:widget>
    Kode di atas akan menampilkan widget di semua halaman. Nah. . . .Karna Blogtegal ingin menampilkan widget tersebut di halaman posting saja maka harus di tambahi kode berikut »»
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    ................,.........................................,...............................
    </b:if>
    Dan nantinya akan menjadi seperti ini.

    <b:widget id='HTML1' locked='false' title='iklan adsense' type='HTML'> <b:includable id='main'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- 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>
    Dari kode diatas yg sudah di edit, hanya akan muncul di halaman posting saja dan tidak akan muncul di homepage, Do you understand.
Nah untuk menampilkan widget pada halaman-halaman yg di inginkan, misal pada homepage saja, pada staticpage saja, pada halaman archive saja dan pada halaman index saja berikut kode-kode yg bisa anda pakai, tinggal ganti kode yg berwarna ungu dg salah satu kode di bawah ini.
    • Menampilkan widget hanya pada halaman depan saja (homepage).
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      ......................................................
      </b:if>
    • Menampilkan di semua halaman kecuali homepage.
      <b:if cond='data:blog.url != data:blog.homepageUrl'>
      ......................................................
      </b:if>
    • Menampilkan widget hanya pada halaman Archive saja.
      <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      ......................................................
      </b:if>
    • Menampilkan widget di semua halaman kecuali halaman archive.
      <b:if cond='data:blog.pageType != &quot;archive&quot;'>
      ......................................................
      </b:if>
    • Menampilkan widget hanya di halaman posting.
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      ......................................................
      </b:if>
    • Menampilkan widget di semua halaman, kecuali halaman posting.
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
      ......................................................
      </b:if>
    • Menampilkan widget hanya pada halaman staticpages.
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      ......................................................
      </b:if>
    • Menampilkan widget di semua halaman,kecuali halaman staticpages.
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      ......................................................
      </b:if>
    • Menampilkan widget hanya pada postingan tertentu saja.
      <b:if cond='data:blog.pageType == &quot;alamat-postingan&quot;'>
      ......................................................
      </b:if>
    • Menampilkan widget selain di postingan tertentu.
      <b:if cond='data:blog.pageType != &quot;alamat-postingan&quot;'>
      ......................................................
      </b:if>

1.
Read More

Jumat, 30 Desember 2011

Cara Membuat READMORE ( baca selengkapnya ) Otomatis di Blogspot

02.16  ,  No comments
        Cara Membuat Readmore Otomatis. Postingan kali ini akan memberikan tutorial Cara Membuat Readmore atau Baca Selengkapnya pada postingan blog secara otomatis. Dengan adanya readmore otomatis, kita bisa menentukan berapa ketinggian dan lebar penggalan postingan dan image yang akan muncul pada halaman pertama blog kita sehingga terlihat rapi dan menarik.

        Trik ini mungkin telah banyak yang mengetahui dan ada juga yang belum mengetahuinya. Bagi anda yang belum mengetahui bagaimana cara membuat readmore otomatis, bisa mengikuti tutorial berikut ini.
PERTAMA, silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template" atau lihat gambar di bawah ini :


cari kode </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>
KEDUA, cari kode html berikut ini :
<data:post.body/> atau <p><data:post.body/></p>
ganti kode tersebut dengan kode di bawah ini :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
Keterangan : tulisan yang berwarna merah adalah yang bisa anda ganti.
==> Summary noimg 430 = tinggi artikel terpenggal tanpa image
==> Summar img 430 = tinggi artikel terpenggal dengan image
==> Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...

KETIGA, klik save template
Selanjutnya anda bisa melakukan postingan dan lihat hasilnya, Readmore atau baca selengkapnya akan secara otomatis terpasang setelah anda publish postingannya.

1.
Read More

Rabu, 14 Desember 2011

Cara Membuat Navigasi Breadcrumb pada blog

05.47  ,  No comments



Cara Membuat Navigasi Breadcrumb ( mengurutkan dari home - label - postingan )- Kali ini bekompas akan berbagi lagi trik blogger kepada kawan-kawan blogger semua karena sudah lama rasanya tidak berbagi tutorial blog. Pada saat ini icalcell akan berbagi Cara Membuat Navigasi Breadcrumb atau Breadcrumb Navigation. Mungkin sudah banyak tersebar di search engine, tapi tidak ada salahnya bekompas membagikan sesuai cara yang digunakan untuk navigasi breadcrumb di blog ini (baca : Tutorial Blog).

Sebelum ke langkah pembuatan navigasi breadcrumb, bekompas akan menjelaskan fungsi dari navigasi breadcrumb ini, kenapa kita perlu membuatnya.
  1. Navigasi Breadcrumb akan membuat tampilan blog seolah-olah blog profesional.
  2. Visitor akan mudah menjangkau semua isi postingan blog dengan adanya navigasi breadcrumb, karena adanya pemberitahuan , bahwa dia saat ini berada pada posisi mana.
  3. Navigasi breadcrumb sendiri merupakan penjabaran label postingan, sehingga label postingan kemungkinan akan banyak diklik oleh visitor, dan akan memunculkan postingan menarik dengan label tertentu sehingga akan meningkatkan pageviews blog tentunya.
Contoh navigasi breadcrumb yang  gunakan di blog (baca: Trik Gratisan)

Navigasi Breadcrumb
 Lalu sebenarnya navigasi breadcrumb ini apa sih??? Navigasi breadcrumb sendiri merupakan proses pengembangan dengan label setiap postingan, dengan adanya label, maka terciptalah suatu navigasi breadcrumb, dengan posisi label ke judul postingan tertentu. Jadi intinya setiap postingan harus ada labelnya minimal 1 label perpostingan, agar navigasi breadcrumb bisa tampil dengan sempurna.

Langkah pembuatan Navigasi Breadcrumb
  1. Login ke blog tentunya, langsung menuju ke halaman EDIT HTML , jangan lupa ceklist Expand Widget template.
  2. Cari kode yang mirip seperti ini.
    <div class='post hentry'>
  3. Kopi kode di bawah ini persis di bawah kode diatas
    <b:if cond='data:blog.pageType == &quot;item&quot;'> <div align='left' style='border-bottom:1px solid #940F04;font-size:10px;'>You are here: <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='nofollow'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if> &#187; <data:blog.pageName/></div></b:if>
  4. Setelah itu preview dulu, kalau kesalahan pengeditan tidak terjadi baru di save pengaturannya
Nah itulah sedikit Cara Membuat Navigasi Breadcrumb, selamat mencoba teman-teman blogger, semoga bermanfaat. 
1.
Read More

Selasa, 13 Desember 2011

Cara Mudah Membuat Page Peel Effect Untuk Blogger

18.41  ,  No comments
Kalian tau apa itu page peel effect ??? yupz betul sekali kalian , hmm page peel effect menurut saya adalah efek lekukan kertas.
nah kali ini saya akan menunjukkan cara yang paling mudah untuk membuat efek tersebut, efek tersebut bisa kalian lihat di blog saya bekompas , lebih tepatnya di pojok kanan atas blog ini, itu yg namanya page peel effect. kalian ingin page peel effect yang seperti di blog ini tidak ? kalo ingin akan saya tunjukkan caranya.
oke , langsung saja to the point tanpa basa basi lagi saya akan menunjukkan caranya, cara mudah membuat page peel effect untuk blogger.

1. kalian masuk ke akun blogger kalian.

2. Racangan => edit html

3. cari kode <head>

4. Kemudian anda copy kan kode di bawah ini tepat di bawah kode <head>

<script type='text/javascript'>var tujuan =&#39;https://www.facebook.com/pages/Bekompas/235661016505930&#39;</script>
<script src='http://nazuafreedotblogspotdotcom.googlecode.com/files/pagepeeleffectnazuafreedotblogspotdotcom.js/' type='text/javascript'/>

5. ganti tulisan yang berwarna merah dengan alamat fan page blog anda

6. kemudian simpan template dan refresh blog anda , dan lihat hasilnya.


sekian tutorial dari saya jika ada kesalahan mohon maaf , dan jangan lupa like fan page blog ini juga wkwk :D
1.
Read More

Cara Membuat 2 Kolom dibawah Postingan Blog

08.45  ,  3 comments
Cara Membuat 2 kolom dibawah Postingan | Postingan Berikut Mengulas Cara Membuat 2 kolom dibawah Postingan blog sobat, jadi khusus buat yang punya template sempit kayaknya ya, jadi bisa di pakai untuk meletakkan Iklan PPC, Iklan Google Adsense, widget seperti follower, Fanpage dan Lain sebagainya, Nah lalu Bagaimana caranya?

Oke. Perhatikan Cara Membuat 2 kolom dibawah Postingan berikut : 
  1. Masuk keakun blogger anda
  2. Pilih Rancangan => Edit HTML=>Centang Expand Widget Template
  3. Cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat diatasnya

    5. #bawahpost{background:#262626 url(http://oketrik.googlecode.com/files/borderbg.gif) 49% 0 repeat-y;text-shadow:none;border:1px solid#4d4d4d;padding:15px;margin:0 0 10px;color:#a6a6a6} #bawahpost .related-posts{font-weight:bold;width:48%;float:right} #bawahpost .related-posts p{margin:0} #bawahpost .related-posts ul{font-weight:normal;margin:2px 0 0 10px} #bawahpost .langganan{width:46%;float:left;color:#a6a6a6} #bawahpost.langganan form{margin:0;padding:0} .clearfixed:after{content : ".";display:block;height:0;clear:both;visibility:hidden}.clearfixed  {display : inline-block;}
  5.  Setelah itu cari  kode <data:post.body/> (Kalau sudah memasang fasilitas Read more otomatis pilih kode yang kedua) dan taruh kode di bawah ini tepat di bawahnya
    6. <div class='clearfixed' id='bawahpost'> <div class='langganan'> kode widget  </div> <div class='related-posts'> kode Widget  </div> </div>
    Ingat  kode atau tulisan yang berwarna biru tersebut dapat di ganti dengan kode widget yang akan di pasang di bawah post.
  1.  terakhir tinggal klik simpan dan lihat hasilnya
1.
Read More

Cara Membuat Read More Otomatis

08.24  , ,  1 comment


Postingan kali ini akan memberikan tutorial Cara Membuat Readmore atau Baca Selengkapnya pada postingan blog secara otomatis. Dengan adanya readmore otomatis, kita bisa menentukan berapa ketinggian dan lebar penggalan postingan dan image yang akan muncul pada halaman pertama blog kita sehingga terlihat rapi dan menarik. Trik ini mungkin telah banyak yang mengetahui dan ada juga yang belum mengetahuinya. Bagi anda yang belum mengetahui bagaimana cara membuat readmore otomatis, bisa mengikuti tutorial berikut ini.

PERTAMA, silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template" atau lihat gambar di bawah ini :

cari kode </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

KEDUA, cari kode html berikut ini :

<data:post.body/> atau <p><data:post.body/></p>

ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan : tulisan yang berwarna biru adalah yang bisa anda ganti.
==> Summary noimg 430 = tinggi artikel terpenggal tanpa image
==> Summar img 430 = tinggi artikel terpenggal dengan image
==> Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...

KETIGA, klik save template

Selanjutnya anda bisa melakukan postingan dan lihat hasilnya, Readmore atau baca selengkapnya akan secara otomatis terpasang setelah anda publish postingannya.
1.
Read More

mengoptimalkan fungsi Read More yang sudah dimiliki Blogger

06.30  ,  No comments
Larasmadyo Dot Com "Blogger sekarang Sudah memiliki Fungsi read More Sendiri" : Buat sahabat Blogger Peula Larasmadyo Dot Com Diberitaukan Sekarang anda sudah tidak perlu repot repot lagi untuk membuat Read More pada Halaman Blog anda karena sekarang Blogger sudah Menyediakan Fasilitas Read More.

Read More Atau lebih banyak dikenal dengan Baca Selengkapnya Ini artinya, untuk memotong artikel agar tidak terlalu panjang tampil di halaman depan, anda hanya tinggal klik tombol " Read more" saja dan anda tidak harus repot lagi mengetikkan kode read more hasil hack atau apapun.

Namun, sepertinya tombol ini hanya muncul pada post editor baru dan dalam posisi mode "Compose" dan tidak muncul pada mode "Edit HTML". Walaupun seperti itu, anda masih tetap bisa menggunakan fungsi "read more" pada post editor lama serta dalam posisi mode "Edit HTML" yaitu dengan mengetikkan secara manual kode


<!-- more -->

Untuk anda yang memakai template asli yang disediakan blogger akan langsung bisa menikmati fasilitas ini dan hasilnya akan muncul tulisan " Read more » "  seperti ini :


Bagi anda yang memakai template bukan yang disediakan oleh blogger atau template hasil download dari situs lain, fungsi "  Read more " akan tetap berfungsi secara baik atau dengan kata lain artikel anda akan tetap terpotong namun tulisan " Read more » " tidak akan muncul. Untuk hal ini anda harus menambahkan kode tambahan pada template anda. Berikut langkah-langkahnya :
  1. Silahkan login ke blogger dengan ID anda.
  2. Klik Tata Letak.
  3. Klik tab Edit HTML.
  4. Beri tanda centang pada kotak kecil di sampil tulisan " Expand Template Widget " expand-template-widget
  5. Carilah kode yang mirip seperti Ini :

    <div class='post-body entry-content'>
          <data:post.body/>
          <div style='clear: both;'/> <!-- clear for photos floats -->
        </div>
  6. Copy lalu paste kode berikut persis di bawah kode yang tadi :

    <b:if cond='data:post.hasJumpLink'>
          <div class='jump-link'>
            <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 
          </div>
        </b:if>

    code
  7. Klik tombol SIMPAN TEMPLATE
  8. Selesai.
Dengan cara tersebut, tulisan " Read more » " akan muncul walaupun anda tidak menggunakan template yang disediakan oleh blogger.

Secara default tulisan yang akan muncul adalah " Read more » ", namun anda bisa mengubahnya sesuai keinginan anda, caranya seperti ini :

  1. Silahkan login ke blogger dengan ID anda.
  2. Klik Tata Letak.
  3. Klik tab Elemen Halaman.
  4. Klik "Edit" pada elemen "Posting Blog" atau "Blog post" untuk yang bahasa inggris. posting-blog-element
  5. Setelah muncul jendela baru, gantilah tuisan Read more »  menjadi tulisan sesuai dengan keinginan anda. edit read more
  6. Klik Tombol SIMPAN
  7. Selesai.
1.
Read More

Tutorial Blog Cara Membuat Widget artikel / posting Populer

06.26  ,  No comments
Tutorial Blogger : Larasmadyo pada kesempatan kali ini akan mengajak sobat blogger membuat widget artikel populer atau sering juga disebut top posting. Top Posting adalah postingan yang paling popular yang mungkin paling sering diklik atau paling banyak mendapat komentar.



Widget ini memiliki fungsi seberapa populerkah artikel-artikel kita di blog sendiri. Banyak parameter yang digunakan untuk menyusun artikel terpopuler ini, mulai dari jumlah berapa kali artikel tersebut dibaca atau berapa jumlah komentar pada artikel tersebut.



Langkah-langkah untuk memasang Widget populer post adalah Sbb:

  1. Login to Blogger
  2. Kemudian pilih "Layout" atau Tata Letak
  3. Klik pada Tambah Widget atau bahasa inggrisnya "Add a Gadget / Widget"
  4. Pilih HTML/Javascript
  5. Copy Paste Script :Berikut
    6. <script type="text/javascript"> function pipeCallback(obj) { document.write('<ul style="text-transform: capitalize;">'); var i; for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ul>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ff855e4f4d4a10fde1c2eb32074f99cd&url=http%3A%2F%2Fbekompas.blogspot.com&num=10" type="text/javascript"></script> <span style="font-size: 80%">Widget Edit <a href="http://www.larasmadyo.com/2011/08/tutorial-blog-cara-membuat-widget.html" target="_blank">larasmadyo</a></span>
  6. Ganti bekompas.blogspot.com dengan nama blog kamu.
  7. Angka "10" menunjukkan jumlah "Top Post" yang ditampilkan, kamu bisa menggantinya
  8. Terakhir  Simpan.
1.
Read More

Cara mengganti Icon mouse pada blog atau website

06.23  ,  1 comment
Trik berikut ini akan membahas cara mengganti Icon mouse Standar menjadi Icon Mouse yang di inginkan. Untuk mendapatkan File ikon anda bisa search di google dengan kode cursor atau menulis kode sesuai dengan ke inginan anda. Alternatif lain untuk mendapatkan Icon Cursor anda juga bisa menggunakan situs yang menyediakan fasilitas untuk menbuat Icon misalnya :
Kemudian anda juga dapat mendownload langsung file Icon dibeberapa situs seperti
Apabila anda sudah memiliki Icon, anda tinggal upload file Icon anda misalnya di photobucket kemudian Copy direct link ya.
Untuk langkah-langkah mengganti Icon mouse adalah sebagai berikut :
  1. Siapkan file icon yang akan anda gunakan, Apabila anda sudah memiliki Icon, anda tinggal upload file Icon anda misalnya di photobucket
  2. Copy direct link Icon anda
  3. Login ke blog anda
  4. Pilih halaman Dasbor >Tataletak >Edit HTML
  5. Cari kode body { gunakan ctrl+F atau F3 untuk memudahkan pencarian kode
  6. Jika sudah Copy kode dibawah dan letakan dibawah kode body {
    7. cursor: url("URL GAMBAR ANDA"), default; Ganti tulisan yang berwarna merah dengan URL gambar anda Misalnya : cursor:  url("http://i188.photobucket.com/albums/z50/reximages/cursors/cursor108.gif"), default;
  7. Jangan lupa Simpan Template
  8. Lihat hasilnya jika berhasil maka Icon mouse anda akan berubah
1.
Read More

Cara memasang Toolbar Wibiya pada blog

06.22  ,  1 comment

Ada yang sudah tau soal toolBar Wibiya?. saya rasa sudah banyak yang tau soal toolBar Wibiya ini. ToolBar wibiya dapat kita jadikan solusi agar tampilan blog anda bisa terlihat lebih propesional. wibiya menyediakan ToolBar yang memiliki banyak keuntungan dimana ToolBar Wibiya memungkinkan kita untuk menggunakan fitur-fitur seperti menampilkan jumlah pengunjung blog, search engine blog dan yang paling keren yaitu Toolbar wibiya langsung terkoneksi dan update situs jejaring sosial tanpa harus membuka web jejaring sosial tersebut selain itu juga toolbar wibiya terkoneksi dengan yahoo, Myspace, translate serta masih banyak lagi dan yang terakhir toolBar wibiya di sediakan gratis untuk pengguna web.

Untuk yang berminat memasang toolbar wibiya ini anda bisa mengikuti langkah-langkah berikut :

  1. Login ke blog anda terlebih dahulu
  2. Buka halaman web wibiya, bisa langsung klik disini
  3. Akan tampil halaman seperti ini kemudian klik "get it now"
  4. Setelah itu akan muncul halaman seperti ini:
  5. Isi form tersebut sesuai dengan data anda
    6. Full name : Isi dengan mana anda Email andress : Masukan alamat email anda Site Url : Masukan alamat blog anda Site Name : Masukan nama blog anda Site language : Pilih bahasa yang anda gunakan pada blog anda
  6. Klik Next jika berhasil akan tampil halaman seperti ini:
  7. Pilih Tema sesuai dengan keinginan anda jika sudah klik Next
  8. Kemudian anda akan dihadapkan ke halaman berikutnya seperti ini:
  9. Lihat gambar diatas, anda disuruh memilih aplikasi yang ingin anda tampilkan jika sudah klik next
  10. Akan muncul halaman seperti ini:
  11. Isi data form yang diminta kemudian klik done
  12. Jika semua data yang di isi benar maka akan tampil halaman seperti ini:
  13. Klik logo blogspot/blogger jika anda mengunakan blogger atau yang lainnya tinggal menyesuaikan dengan web yang anda gunakan
  14. Akan tampil halaman seperti ini tinggal klik "Menambah Widget"
  15. Jika berhasil anda akan dibawa masuk kehalaman layout/tata letak blog anda dengan pesan seperti inilihat kotak yang berwarna merah
  16. Klik simpan dan selesai
1.
Read More

Membuat halaman fans/penggemar di facebook

06.20  ,  No comments

Salah satu fungsi utama dari membuat halaman fans/penggemar di facebook adalah sebagai sarana silahturahmi antara pemilik blog dengan pengunjung selain itu halaman fans bisa kita gunakan untuk mempromosikan blog anda serta memberikan informasi terbaru mengenai blog anda. Saya rasa anda sudah sering melihat halaman fans/penggemar difacebook hanya saja anda belum tau bagai mana cara membuatnya. jika ingin melihat contoh halaman fans/penggemar yang sudah jadi anda bisa lihat  halaman fans komunitas blok pemula DISINI

Untuk membuat halaman fans/penggemar difacebook seperti itu cukup mudah ,  jika anda berminat untuk memuat halaman fans/penggemar difacebook tinggal ikuti langkah-langkahnya berikut ini.
  1. Pastikan anda meiliki akun facebook.
    2. Anda tidak bisa membuat halaman fans apabila belum memiliki akun difacebook. silahkan buat akun facebook anda terlebih dahulu
  2. Jika sudah memiliki akun longin ke akun facebook anda
  3. Buka halaman pembuatan aplikasi facebook disini http://www.facebook.com/pages/create.php
  4. Muncul halaman seperti ini
    5. Silahkan anda pilih sesuai dengan kategori blog anda. disini saya memilih "couse or community"
  5. Klik "couse or community", maka tampil seperti ini:
  6. Masukan Judul blog anda kemudian centang kotak kecil  dibawah form judul blog anda (lihat gambar diatas)
  7. Klik mulai , jika berhasil muncul halaman baru seperti ini :
    8. Dengan muncul halaman seperti gambar diatas berarti halaman fans/penggemar anda sudah jadi dan anda tinggal mengelola halaman fans anda
  8. Untuk mengatur halaman fans lebih lanjut Klik suting halaman maka tampil halaman seperti ini:
    9. Disamping kiri terdapat menu-menu yang bisa anda gunakan untuk mengatur halaman fans anda.misalnya seperti : Informasi umum: untuk mengisi informasi umum mengenai halaman fans anda Foto profil: untuk menambahkan foto halaman fans anda dan yang lainny silahkan anda olah sendiri
  9. Selesai
1.
Read More

Cara menyembunyikan widget pada halaman utama

06.16  ,  No comments
Terkadang dihalaman blog anda dipenuhi dengan widget sehingga loading blog anda akan menjadi lebih abot. Nah untuk mengatasi hal tersebut anda bisa menyembunyikan widget anda pada halman tertentu. Misalkan Widget fotter hanya tampil pada halaman utama saja sedangkan pada halaman index posting widget tidak tampil. Dengan menyembunyikan widget anda pada halaman tertentu maka dapat meringankan beban loading blog anda selain itu blog anda juga akan tampil dinamis dengan perubahan tampilan pada blog anda yang membuat ketertarikan pada setiap pengunjung yang melihatnya.

Mungkin anda sudah tau kalau blog anda terdiri dari beberapa halaman diantanya yaitu:
  1. Halaman Utama
  2. Halam Index posting
  3. Halaman index label dan 
  4. Halaman statis
Widget-widget dihalaman blog anda bisa anda atur sesuai keinginan anda apakah mau tampil pada halaman utama, halaman index posting, kemudian halaman index label ataupun dihalaman statis. Husus tutorial kali ini saya batasi permasalahan hanya samapai tetang cara menyembunyikan widget pada halaman utama saja sedangkah cara menyembunyikan widget pada halaman berikutnya akan saya bahas pada tutorial selanjutnya.

Langkah-langkah menyembunyikan widget pada halaman utama adalah sebagai berikut :
  1. Masuk kehalaman blog anda
  2. Pilih Rancangan >Edit HTML
  3. Download lengkap template terlebih dahulu untuk mengantisifasi apa bila terjadi galat template
  4. Setelah itu Cari kode ]]></b:skin>
  5. Copy kode dibawah dan letakan dibagian bawah kode ]]></b:skin>
    6. <b:if cond='data:blog.pageType != &quot;item&quot;'> <style> #HTML1,#Feed1,#Label1,#HTML4,#HTML8,#HTML14 {display:none;} </style> </b:if>
    Keterangan : Perhatikankode yang berwarna merah, Silahkan anda ganti dengan ID widget anda. Cara mengetahui widget blog anda perhatikan gambar dibawah ini
  6. Terakhir klik simpan templat dan selesai
Selamat mencoba dan semoga berhasil
Tunggu  posting berikutnya tetang cara menyembunyikan widget pada halaman Index posting, halaman index label dan halaman statis
1.
Read More

Cara Menghilangkan widget Attribution pada blog

06.06  ,  No comments
Apa bila anda menggunakan template bawaan dari blogger maka dibagian bawah pada halaman footer anda terdapat widget Attribution yang biasanya bertulisan "Didukung Oleh Blogger".Widget ini merupakan widget ketentuan dari blogger yang tidak bisa dihapus bahkan dipindah-pindahkan, tapi jangan khawatir buat sobat yang ingin menghilangkan widget Attribution bisa dengan menyembunyikannya, hanya dengan sedikit melakukan edit HTML pada template blog sobat.

Masih ingat tentang tutorial sebelumnya tetang cata menyembunyikan widget pada halaman tertentu atau tetang cara menampilkan widget dihalaman posting atau menampilkan widget pada home page. jika sobat masih ingat sobat pasti tau prinsip kerja dan caranya. nah kembali lagi ketutorian ini prinsip kerjanya sama seperti anda menyembunyikan widget pada halaman tertentu. hanya saja widget attribution ini kan kita sembunyikan pada semua halaman.

Langkah-langkah untuk menyembunyikan widget Attribution adalah sebagai berikut :
  1. Pastikan anda sudah masuk ke akun blogger anda
  2. Pilih Rancangan >Edit HTML
  3. Cari kode ]]></b:skin> gunakan tombol ctrl+f atau F3 untuk mempermudah pencarian kode
  4. Setelah ketemu Copas kode diabwah letakan diatas kode ]]></b:skin>
    5. #Attribution1 { height:0px; visibility:hidden; display:none }
  5. Kemudia klik Simpan template
  6. Selesai
1.
Read More

Cara membuat buku tamu tersembunyi

06.02  ,  No comments


Tutorial kali sebenarnya sudah lama ingin saya posting tapi saya lupa karena terlalu asik mencoba-coba hal yang baru. Untungnya ada teman kita Mitro yang tanya Seperti ini: mitro :"bre.,.,.,ghi mna caranya bwat buku tamu bisa d samping te .,.,kyak punya u.,.,.????!!!!!". akhirnya saya ingat kalu tutorial ini belum saya posting. Saya rasa buku tamu yang tersembunyi cukup baik karena akan lebih menghemat halaman blog anda selain itu juga akan membuat tampilan blog lebih menarik.


Ok sekalian untuk menjawab pertanyaan teman kita mitro yang mungkin maksut dari pertanyaannya adalah cara membuat buku tamu tersembunyi, akan saya coba bahas secara rinci. Sebulum anda menyembunyikan buku tamu anda, anda harus  memiliki akun terlebih dahulu di Shoutmix untuk mendapatkan kode buku tamunya. Silahkan baca caranya Disini. Apabila anda sudah memiliki kode buku tamunya bisa langsung mengikuti langkah-langkah berikut :
  1. Login kehalaman blog anda
  2. Pilih Rancangan >Elemen Halaman >Tambah gadget
  3. Pilih/tambahkan HTML/JavaScript
  4. Akan tampil halaman seperti ini
  5. Copas kode berikut kedalam box HTML/Javascript 
    6. <style type="text/css">
#gb{
position:fixed;
top:30px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i932.photobucket.com/albums/ad161/mamad_bucket/tabs-1.png')no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#900c0c;
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">

Kode buku tamu anda letakan disini

<div style="text-align:right">
<a href="http://www.full-information.co.cc/">
[Komunitas blog pemula]
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>



<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>
    Keterangan :
    • Kode warna biru adalah untuk mengatur tinggi dan lebar jadi silahkan anda sesuaikan
    • kode warna merah adalah tempat meletakan kode buku tamu anda
    • warna pink adalah url blog anda jadi silahkan anda ganti dengan alamat blog anda
    • kode warna coklat adalah judul blog silahkan ganti dengan judul blog anda
  6. Klik simpan dan selesai
Sekian tutorial cara membuat buku tamu tersembunyi semoga bermanfaat.jika anda masih bingung jangan sungkan untuk mengajukan pertanyaan. jangan lupa kritikan dan sarannya. Terimakasih




1.
Read More

Cara membuat search engine blog

05.56  ,  No comments
Search engine sangat diperlukan dalam dunia internet karna dengan search enggine akan memudahkan anda untuk mencari sesuatu yang anda butuhkan sesuai dengan keyword yang anda ketikan.Search engine pada blog Sama halnya dengan Daftar isi dan Navigasi halaman yaitu seperti yang sudah de jelaskan diatas untuk memudahkan pengunjung blog menemukan isi dari blog anda.Nah!, untuk membuat search engine pada blog anda sebenarnya mudah anda hanya perlu menambahkan Kode HTML. Ok langsung kita bahas langkah-langkahnya:

  1. Pastikan anda login ke blog anda
  2. Pilih >Rancangan >Elemen halaman/Tata letak
  3. Klik add gadget tambahkan HTML/JavaScript dan anda akan menjumpai seperti ini
  4. Copas kode berikut kedalam box yang disediakan
    5.  
    <form action="http://bekompas.blogspot.com/search" method="get"> <input class="textinput" name="q" size="30" type="text" /> <input class="buttonsubmit" name="submit" type="submit" value="search" /></form>  
  1. Klik simpan
  2. Maka hasilnya seperti dibawah ini
    3. yang perlu anda perhatikan adalah tulisan yang berwarna merah. Silahkan anda ganti dengan Alamat blog anda. 
    Selesai semoga bermanfaat
1.
Read More
Prev home
tutorial blogpengobatan tradisional