Showing posts with label Tutorial Blog. Show all posts
Showing posts with label Tutorial Blog. Show all posts

Sunday, April 10, 2011

Pasang Iko/Icon Twitter Burung Terbang V2

Tutorial kali ini saya akan bahas tentang "Cara Pasang Ikon Twitter Burung Terbang Versi 2", kenapa saya kasih judul Versi 2? karena pada postingan sebelumnya sudah saya bahas tentang tutorial seperti ini yaitu Cara Pasang Ikon Twitter Burung Terbang. Berhubung masih ada diantara sobat yang meminta agar ada yang lebih bagus lagi tentang Cara Pasang Ikon Twitter Burung Terbang ini.

Dengan tutorial Ikon Burung Terbang Versi 2 ini mudah-mudahan sobat semua bisa menjadi puas dan bangga karena yang Versi 2 ini dilengkapi dengan berbagai mwarna burung, tinggal para sobat semua pilih sesuai dengan selera atau warna template masing-masing. Contoh berbagai macam warna burungnya seperti yang terlihat di bawah ini :





OK, saya tidak akan panjang lebar lagi, mungkin para sobat sudah tidak sabar ingin segera memasangnya, berikut langkah-langkah yang harus sobat tempuh :

  1. Masuk (Login) ke Dashboard Blogger sobat.
  2. Pilih Rancangan, lalu Page Elelement.
  3. Kemudian Tambahkan Gadged/Widget, pilih HTML/JavaScript.
  4. Langkah selanjunya pilih dab copy script “JavaScript” dibawah:
  5. Kemudian klik tombol Save


Untuk Burung warna Merah :

<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh5WSTK5q8QxSSqREIqOgjBtjHZ_WzXsMGLIbakItb_Bqf-dh8abqmBxpOJ5Q2iDuTKMhPsPAxkfC-53-yqwxQu1YP5VquQThDVyC1kfNIpLctHGCMUVqtezb1hK_owgRhmhXh4OOXupA/"; 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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit();
</script>

Untuk burung warna Biru :

<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz6FBj6sKGj-6BOFOb4JTWTF5hkrC4Zf7EykhuwcOXEsd3_daMAobpWMGT5h4oc0Ew-gWQZjVfs7W-Nyou7KyOCg0lv9HaT2bKaMwQ7fx1_QWs9TvnEFcpStVcPO3D0Ojn0gzI-oLIMYk/"; 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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit();
</script>


Untuk burung warna Ungu :

<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJntMvS-14Lq93mT_CSQyTeqIl9Tfsg8SnRtug54B0BeT0xLLkQvRlILKc94tyDijya-IiCaJdWKHEXy73I1B40yy7JUdr_1KsXl2kKaEbV1-J_R7qWRDhx0RCl2UQ16shHLam7iRrC0Y/"; 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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit();
</script>


Untuk burung warna Cokelat :

<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoCZCaPzidjqp9hpp_F4vJOBC9nhSFDaVd20W567JrWsTHhcStNvkhMjkTBK_2Nn6rLHRFqOMQp2JJ6u2ZbdIx-8upcluSzPGL2x0E9y2HPoS8yJI-uWILw2Zo8Ur4LMTQUMKZ0K4OC9s/"; 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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit();
</script>

Untuk burung warna Hitam :

<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4qY3vezfpwBwQRTGT4YL5J5MFbCtApaGwDNQaC2q3HPKSZ1npvDFpcA0J9TWPcUOi1_iCg4NT4NDLIJeCFnveyQQzsKBVEnNtUJMlCkb58vkePJlGCxjMgA3ofM7x_9tVAMVmYO6Ir4/"; 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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit();
</script>


Untuk burung warna Hijau :

<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi30G3fw-G245P96Aad1gqoSd04ynmJ5NbNsDYIaLKvWRSNUQSnWezq_57jyWG31gQIpJAr8OUpEu8PLCjgYgdFs1gmTLsoswFTV554AoViOccGQGZHQSGFJIaDRQply7IX1RMqWW4BdtQ/"; 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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit();
</script>

Untuk burung warna Kuning :

<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglJruXVOqcuBds4nBE26h13RlHGp7g609OF0MGBCO6-ZNNKpfPcjzzN-yYJ46N1uofeCeT955QcYF2g8QDgjfxk2h8tSdYakbYuE-ha0JAHVj7k4Cf6X93KxvpuI_R7LFdzPc-_tMVt_c/"; 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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit();
</script>




Untuk burung warna Putih :

<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL-1RdL7xlSRhzOke75wUW5OMJ20DMBuS_rRQm1XgW5Bk-i-F0y1vMO3LBqfO2OPjL8geMB0CLrU1lt3HjXbml5jM7JD1LpXaHRQV-bN0Xx8aNKhwo8HgcjVY4NcsPqf8XhZvO0dvSOfU/"; 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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit();
</script>

Untuk burung warna Biru Setandar :

<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ4j1rJ3v4cccz1ZR3PHTOxWkngfJ6lOjOuFxw6GMX35Muk6kJPdManA4BV1B130sFmiBv6oCSJbbiDzf0V0RaFvUL9K8abjl_Yep_ELgatZdPX9vG6mjifBosy7iHNNjMzT-mJYSCOJw/"; 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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit();
</script>

PERHATIAN!!
Untuk kode yang berwarna biru silahkan sobat ganti dengan Nama/User Name twitter sobat, terus kode yang berwarna merah silahkan ganti dengan URL Blog sobat.

at 4:42 AM 0 comments
Labels:
Posted by djcapoenk

Saturday, March 12, 2011

membuat Widget hanya Terlihat di Halaman Home

Dengan menambahkan beberapa kode pada template, kita bisa membuat sebuah widget hanya tampil pada halaman depan blog (Home page) saja,dan tidak tampil pada halaman membaca artikel (Post Page). Bagaimana caranya? Kita pakai cara yang paling mudah aja.. Let see.

1. Login ke Account/Dashboard blog kalian,kemudian pilih tab Design/Rancangan.

2. Masuk ke menu Edit HTML.

3. Cari kode ]]></b:skin>

4. Ganti kode tersebut dengan kode di bawah ini :

]]></b:skin>
<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#HTML1 {display:none}
#HTML3 {display:none}
</b:if>
</style>

5. Perhatikan teks berwarna biru diatas.. itu adalah kode id elemen yang akan kita buat tampil di halaman home saja. Ganti kode tersebut dengan id widget kalian. Bagaimana cara mengetahui kode id tersebut pada template kalian?

Kalian bisa mencari berdasarkan judul widgetnya. Teks warna merah dibawah adalah judul widget,sedangkan yang berwarna biru adalah id widgetnya.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Subscribe' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Free Template' type='HTML'/>
<b:widget id='HTML3' locked='false' title='New Tutorial' type='HTML'/>
</b:section>
</div>

NB: Pada contoh diatas,berarti widget yang hanya akan tampil dihalaman depan blog adalah widget Subscribe dan New Tutorial. Sedangkan pada halaman membaca artikel,kedua widget tersebut ngga akan terlihat.

6. Save template,dan lihat hasilnya.

sumber : resepblog



at 6:55 PM 0 comments
Labels: ,
Posted by djcapoenk

Friday, March 11, 2011

Membuat Tab View Di Bawah Posting Blog

Assalamu'alaikum semua sahabat blogger tanpa terkecuali. Setelah jauh jauh terbang di dunia maya akhirnya saya nemuin sesuatu yang unik yaitu Membuat Menu Tab View di Bawah postingan.

Pastinya uda pada kenal kan sama widget Tab View menu? Penggunaan dan pemasangan menu Tab View bisa bermanfaat sekali dan sangat cocok digunakan pada ruang yang terbatas. Cara pasang menu Tab View tersebut juga cukup simpel.

Biasanya menu Tab View ini dipasang pada menu sidebar ato footer, widget tersebut bisa dipasang di mana saja.

Memasang widget di akhir postingan sepertinya adalah salah satu hal favorit dari banyak pemilik blog. Biasanya kita menaruh iklan, artikel terkait, dll di akhir postingan. Nah dengan memasang widget TabView di akhir postingan, kita bisa pasang banyak widget tanpa harus menuh-menuhin tempat. Berikut ini langkah-langkahnya.

Cara Pasang Menu TabView di Akhir Postingan
Pertama, pilih menu Layout -> Edit HTML, beri centang pada pilihan Expand Widget Templates.. Lalu copy dan paste kode di bawah ini sebelum kode ]]></b:skin>
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 160px; /* Lebar Menu Utama Atas */ text-align: center;
height: 26px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Georgia", Serif; /* Font Menu Utama Atas */
font-size: 12px;
font-weight: 900;
background-color: #ccc;
color: #233e45; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #1A3300; /* Warna background Menu Utama Atas */
color: #fff;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #000000; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #fff; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

div.TabView div.Pages div.Page div.Pad li {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhQNNmbKa1dNEpZTQ5iCbbqzL0iYZuCQ3baAIwUuJeKKIq6qqeSG4FPEeBuwQfgZNADj3oxycmhpF1GpLLuAkbPILFYeyFzGIHLzOFtq6Hue3HYTe_rPU0XpWWtU6Apn9vAMc4i-ey_UM/?imgmax=800') no-repeat;
list-style-type: none;
margin: 0 0 5px;
padding-left: 20px;
}
ilahkan Sobat edit kode CSS di atas mulai dari lebar, tinggi, warna dan lain lain. Untuk kode warna silahkan klik disini

Setelah kode di atas dimasukkan, lalu masukkan kode berikut di atas kode </head> atau tepat dibawa kode ]]></b:skin>

<script src='http://kangfatur.googlecode.com/files/tabviewpost.js' type='text/javascript'/>
Setelah itu Save dulu.. Lalu cari kode dan letakkan kode berikut ini dibawah kode tersebut : (sebelumnya di parse dulu)
&lt;form action=&quot;tabview.html&quot; method=&quot;get&quot;&gt;
&lt;div id=&quot;TabView&quot; class=&quot;TabView&quot;&gt;
&lt;div style=&quot;width: 600px;&quot; class=&quot;Tabs&quot;&gt;
&lt;a&gt;Tab 1&lt;/a&gt;
&lt;a&gt;Tab 2&lt;/a&gt;
&lt;a&gt;Tab 3&lt;/a&gt;
&lt;/div&gt;
&lt;div style=&quot;width: 600px; height: 160px; overflow: auto;&quot; class=&quot;Pages&quot;&gt;

&lt;div class=&quot;Page&quot;&gt;
&lt;div class=&quot;Pad&quot;&gt;

KONTEN TAB 1

&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;Page&quot;&gt;
&lt;div class=&quot;Pad&quot;&gt;

KONTEN TAB 2

&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;Page&quot;&gt;
&lt;div class=&quot;Pad&quot;&gt;

KONTEN TAB 3

&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
tabview_initialize('TabView');
&lt;/script&gt;
Setelah semua langkah di atas selesai, klis Save (Simpan Template)
PENTING
Teks yang diberi warna biru dan merah bisa diedit-edit sendiri ama sobat. Oya, jangan lupa konten yang ingin dimasukkan ke tab-tab tersebut, kodenya di parse dulu...
Saya hanya ingin berbagi saja. Karena tampaknya belum banyak yang mengimplementasikan widget ini untuk ditaruh di akhir postingan

Selamat Mencoba semoga berhasil dan bermanfaat.
at 11:33 PM 0 comments
Labels:
Posted by djcapoenk

Thursday, March 10, 2011

Arti Singkatan-singkatan Pagerank

Bagi sobat-sobat pemilik blog yang masih bingung apa artinya kode – kode atau singkatan – singkatan yang ada di pagerank kita, ini ada info artinya.

Indikator yang ditampilkan dalam MyPagerank.net adalah :
Rank => Page Rank
GIP => Google Index Page
GBL => Google Back Link
YIP => Yahoo Index Page
YBL => Yahoo Back Link
MIP => MSN Index Page
ALR => Alexa Rank
ABL => Alexa Back Link
TUV => Today Unique Visitor
TPV => Today Page View
YUV => Yesterday Unique Visitor
YPV => Yesterday Page View
AUV => Average Unique Visitor
APV => Average Page View
Online user => menunjukkan jumlah user yang lagi online.
Indikator yang ditampilkan oleh http://www.mypagerank.net/ adalah indikator SEO paling populer di dunia.
Beberapa arti istilah yang digunakan :
  1. Rank adalah indikator Rangking dari sebuah blog yang berpatokan pada Searh Engine Google.
  2. GIP adalah Google Page Index bahwa blog atau situs tersebut telah ter-index total sebanyak n kali oleh visitor melalui mesin Google.
  3. GBL adalah Google Back Link yang dapat diartikan bahwa Blog atau Situs mendapatkan sebanyak n backlink user lain yang dilakukan melalui mesin pencari Google.
  4. YIP adalah Yahoo Page Index bahwa blog atau situs tersebut telah ter-index total sebanyak n kali oleh visitor melalui mesin Yahoo.
  5. YBL adalah Yahoo Back Link yang dapat diartikan bahwa Blog atau Situs mendapatkan sebanyak n backlink user lain yang dilakukan melalui mesin pencari Yahoo.
  6. MIP adalah MSN Page Index bahwa Blog atau Situs tersebut telah ter-index total sebanyak n kali oleh visitor melalui mesin pencari MSN.
  7. ALR adalah Alexa Redirect (?) yang dapat diartikan bahwa Blog atau Situs mendapatkan sebanyak n kali redirect melalui Alexa.
  8. ABL adalah Alexa Back Link bahwa sudah mendapat n backlink melalui Alexa.
  9. TUV adalah Today Unique Visitor merupakan perhitungan berdasarkan IP addres yang berkunjung, arti unik disini bahwa IP address yang sama berkunjung ketempat yang sama dan dihari yang sama tidak akan dihitung.
  10. TPV adalah Today Page View menandakan tentang berapa kali halaman blog telah dibuka dan cuma sekedar lewat saja sudah mendapat hitungan.
  11. YUV adalah Yesterday Unique Visitor merupakan perhitungan berdasarkan IP addres yang berkunjung dihari sebelumnya dan perhitungan didasrkan pada IP address yang berbeda jadi semacam akumulasi dari TUV (Today Unique View).
  12. YPV adalah Yesterday Page View merupakan jumlah halaman terbuka dihari sebelumnya.
  13. AUV adalah Average Unique Visitor merupakan rata-rata pengunjung yang sudah rela mengunjungi Blog atau Situs anda.
  14. APV adalah Average Pages View merupakan rata-rata halaman yang telah dibuka atau dilihat.
  15. Users Online menandakan bahwa yang online saat itu pada Blog atau Situs adalah xx pengunjung.
at 6:38 PM 0 comments
Labels:
Posted by djcapoenk

Sunday, February 27, 2011

Cara Membuat Tab View Link


Halo para sobat blogger semua selamat sore dan selamat ngeblog. Setelah tiga hari saya tidak posting karena kondisi internetnya bermasalah kali ini saya Alhamdulillah sebelum jalan-jalan ke tempat kawan semua nyempetin untuk posting dulu.

Sebelumnya saya pernah posting Cara Membuat Multitab Level Dropdwon Menu JQuery dan membuat Menu Tab Widgetkali ini saya akan mengetengahkan Cara Membuat Tab View Link. Tab View Link adalah salah satu Widget (tempat) menyimpan Link Kawan-Kawan kita, apalagi sobat yang suka tuker link, selain itu juga Widget ini sangat rapih enak dipandang dan juga membuat blog kita tambah cantik hehehe, itu menurut saya entah low menurut sobat, tapi mudah mudahan berkata gitu juga wkwkwk.

OK kalau sobat kurang puas dan pingin tahu seperti apa itu Tab View Link, di bawah ini contoh gambar Tab View Link :



Nah gimana?? Sobat tertarik?? OK kalau tertarik gita langsung ke tahap pembuatan.

Langkah Pertama
  1. Seperti biasa Login ke blogger dengan id Sobat
  2. Tuju menu Tata Letak
  3. Pada tab menu, klik Edit HTML
  4. Backup template anda, klik Download Template Lengkap untuk berjaga jaga
  5. Kemudian cari kode ini </head> seletah ketemu paste kode berikut diatas kode </head>
<script src='http://kangfatur.googlecode.com/files/tabview.js'
type='text/javascript'/>
Langkah Kedua
Setelah langkah pertama sobat jalankan sekarang kita ke langkah kedua
  1. Cari kode </b:skin>
  2. Kalau sudah ketemu paste kode di bawah ini tepat di atas kode </b:skin>
/* Awal TAB VIEW 1*/
div.TabView div.Tabs
{
overflow: hidden;
}
div.TabView div.Tabs a
{
background: #0101DF ;
background-repeat: no-repeat;
float: left;
display: block;
width: 20px; /* Lebar Menu Utama Atas */
text-align: center;
height: 20px; /* Tinggi Menu Utama Atas */
padding-top: 0px;
vertical-align: middle;
border: 1px solid #eeeeee;
margin-top: 4px;
margin-left: 6px;
margin-right: 6px;
border-bottom: 2px solid #999999;
border-bottom-width: 2px;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama

Atas */
font-weight: 800;
color: #fff; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF; /* Warna background Menu Utama Atas */
background: #0101DF; /* Warna Background Mouse Hover */
background-repeat: no-repeat;
}
div.TabView div.Pages
{
clear: both;
margin-top: 6px;
padding: 5px;
border: 2px double #999999; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #091a9f; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 200%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 4px 2px;
}
/* Akhir TAB VIEW 1*/

  1. Kemudian klik Save Template


Setelah langkah-langkah diatas terpenuhi, kini kita lanjut ke babak penentuan hehe

  1. Pergi ke Tataletak (Rancangan)
  2. Tambah Gadget (HTML/Javascript)
  3. Setelah itu masukan kode di bawah ini:
<left> <table border="0"><tbody>
<tr><td><form action="tabview.html" method="get">

<div id="TabView"
class="TabView">
<div style="width: 340px;" class="Tabs">
<a
href=""><font color="#ffffff"><b>A</b></font></a> <a href=""><font
color="#ffffff"><b>B</b></font></a> <a href=""><font
color="#ffffff"><b>C</b></font></a> <a href=""><font
color="#ffffff"><b>D</b></font></a> <a href=""><font
color="#ffffff"><b>E</b></font></a> <a href=""><font
color="#ffffff"><b>F</b></font></a> <a href=""><font
color="#ffffff"><b>G</b></font></a> <a href=""><font
color="#ffffff"><b>H</b></font></a> <a href=""><font
color="#ffffff"><b>I</b></font></a> <a href=""><font
color="#ffffff"><b>J</b></font></a> <a href=""><font
color="#ffffff"><b>K</b></font></a> <a href=""><font
color="#ffffff"><b>L</b></font></a> <a href=""><font
color="#ffffff"><b>M</b></font></a> <a href=""><font
color="#ffffff"><b>N</b></font></a> <a href=""><font
color="#ffffff"><b>O</b></font></a> <a href=""><font
color="#ffffff"><b>P</b></font></a> <a href=""><font
color="#ffffff"><b>Q</b></font></a> <a href=""><font
color="#ffffff"><b>R</b></font></a> <a href=""><font
color="#ffffff"><b>S</b></font></a> <a href=""><font
color="#ffffff"><b>T</b></font></a> <a href=""><font
color="#ffffff"><b>U</b></font></a> <a href=""><font
color="#ffffff"><b>V</b></font></a> <a href=""><font
color="#ffffff"><b>W</b></font></a> <a href=""><font
color="#ffffff"><b>X</b></font></a> <a href=""><font
color="#ffffff"><b>Y</b></font></a> <a href=""><font
color="#ffffff"><b>Z</b></font></a> <a href=""><font
color="#ffffff"></font></a></div>
<div style="width: 330px; height: 200px;" class="Pages">
<div class="Page">
<div class="Pad">

<table>
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
</div>
</div>
</form>
</td></tr>
</tbody></table>
</left>
4. Klik Tombol Simpan/Save. Selesai deeh

PENTING
Buat Para sobat yang suka utak atik CSS nya atau mau mengganti warna background atau warna bordernya untuk bantuan kode warna silahkan klik disini.

Kemudian cari tulisan Letak Link Kawan Sobat Disini ganti dengan Alamat Link Kawan Sobat misalnya (http://ineufadla.blogspot.com/), treus tulisan Nama Kawan ganti dengan Nama Kawan Sobat misalnya Kang Fatur.

Selamat mencoba semoga berhasil bermanfaat bagi sobat semua Amiiin.
at 5:59 PM 0 comments
Labels:
Posted by djcapoenk

Wednesday, February 9, 2011

Recent Post Slide Show

Salam blogger, sebelumnya Neng Ine akan berterimakasih kepada pengunjung dan pencinta blogger sekalin khususnya shabat - sahabat blogger, pada kesempatan malam ini Neng akan bagi bagikan satu buah trik yang sederhana, simpel tampi mengasikan hehe cara pemasangannyapun sangat simpel.

OK, trik yang akan Neng berikan adalah cara membuat "Recent Post Slide Show" dengan yang namanya "Recent Post Slide Show" ini blog kita akan lebih cantik dan menarik, mudah mudahan pengunjung kita pun juga merasa betah AMIIIN.

OK, berhubung waktu udah malam, gorengan plus kopi udah kering dan dingin kita langsung aja ke Pembahasan :

1. Seperti biasa Masuk ke account Blogger sobat, pilih "Layout" kemudian "Page Elements",
2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:
<script src="http://kangfatur.googlecode.com/files/recentpostslide.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

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

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

-->
</style>

<script language='javascript'>

imgr = new Array();

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

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

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

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

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

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://www.coretan-guru-komputer.co.cc/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://kangfatur.googlecode.com/files/recentpostslide2.js' type='text/javascript'></script>
</div>


PERHATIAN
Kode yang berwarna orange ganti dengan alamat link sobat OK

Setelah semua langkah - langkah terlewati, simpan dan lihat hasilnya??

Selamat mencoba semoga bermanfaat dan jangan lupa comennya,
at 6:18 PM 0 comments
Labels:
Posted by djcapoenk

Tuesday, February 8, 2011

Membuat Tab View di Bawah Postingan

Assalamu'alaikum semua sahabat blogger tanpa terkecuali. Setelah jauh jauh terbang di dunia maya akhirnya saya nemuin sesuatu yang unik yaitu Membuat Menu Tab View di Bawah postingan.

Pastinya uda pada kenal kan sama widget Tab View menu? Penggunaan dan pemasangan menu Tab View bisa bermanfaat sekali dan sangat cocok digunakan pada ruang yang terbatas. Cara pasang menu Tab View tersebut juga cukup simpel.

Biasanya menu Tab View ini dipasang pada menu sidebar ato footer, widget tersebut bisa dipasang di mana saja.

Memasang widget di akhir postingan sepertinya adalah salah satu hal favorit dari banyak pemilik blog. Biasanya kita menaruh iklan, artikel terkait, dll di akhir postingan. Nah dengan memasang widget TabView di akhir postingan, kita bisa pasang banyak widget tanpa harus menuh-menuhin tempat. Berikut ini langkah-langkahnya.

Cara Pasang Menu TabView di Akhir Postingan
Pertama, pilih menu Layout -> Edit HTML, beri centang pada pilihan Expand Widget Templates.. Lalu copy dan paste kode di bawah ini sebelum kode]]></b:skin>
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 160px; /* Lebar Menu Utama Atas */ text-align: center;
height: 26px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Georgia", Serif; /* Font Menu Utama Atas */
font-size: 12px;
font-weight: 900;
background-color: #ccc;
color: #233e45; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #1A3300; /* Warna background Menu Utama Atas */
color: #fff;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #000000; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #fff; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

div.TabView div.Pages div.Page div.Pad li {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhQNNmbKa1dNEpZTQ5iCbbqzL0iYZuCQ3baAIwUuJeKKIq6qqeSG4FPEeBuwQfgZNADj3oxycmhpF1GpLLuAkbPILFYeyFzGIHLzOFtq6Hue3HYTe_rPU0XpWWtU6Apn9vAMc4i-ey_UM/?imgmax=800') no-repeat;
list-style-type: none;
margin: 0 0 5px;
padding-left: 20px;
}
Silahkan Sobat edit kode CSS di atas mulai dari lebar, tinggi, warna dan lain lain. Untuk kode warna silahkan klik disini

Setelah kode di atas dimasukkan, lalu masukkan kode berikut di atas kode </head> atau tepat dibawa kode :]]></b:skin>
<script src='http://kangfatur.googlecode.com/files/tabviewpost.js' type='text/javascript'/>
Setelah semua langkah di atas selesai, klis Save (Simpan Template)

Setelah itu Save dulu.. Lalu cari kode <data:post.body/> dan letakkan kode berikut ini dibawah kode tersebut : (sebelumnya di parse dulu)
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 600px;" class="Tabs">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div style="width: 600px; height: 160px; overflow: auto;" class="Pages">

<div class="Page">
<div class="Pad">

KONTEN TAB 1

</div>
</div>

<div class="Page">
<div class="Pad">

KONTEN TAB 2

</div>
</div>

<div class="Page">
<div class="Pad">

KONTEN TAB 3

</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>
Setelah semua langkah di atas selesai, klis Save (Simpan Template)

PENTING
Teks yang diberi warna Kuning dan orange bisa diedit-edit sendiri ama sobat. Oya, jangan lupa konten yang ingin dimasukkan ke tab-tab tersebut, kodenya di parse dulu...

Saya hanya ingin berbagi saja. Karena tampaknya belum banyak yang mengimplementasikan widget ini untuk ditaruh di akhir postingan

Selamat Mencoba semoga berhasil dan bermanfaat.
at 8:41 PM 0 comments
Labels:
Posted by djcapoenk

Cara membuat Daftar Isi Berdasarkan Label

Akhirnya bisa posting blog lagi nich... kali ini Neng Ine akan menjelaskan penemuan terbaru hasil jalan-jalan di dunia aneh... eh salah di dunia maya alias internet. disini saya akan membahas tentang cara membuat Daftar Isi Berdasarkan Label. Soalnya hampir kebanyakan bilangnya begitu. langsung aja ya... dari sekian banyak cara membuat daftar isi, seperti Disini, disana atau disitu, tips kali ini akan menerangkan bagaimana membuat daftar isi berdasarkan label atau kategori. biasanya daftar isi ini disimpan di sidebar ataupun di postingan. Tujuan dasar dari pembuatan daftar isi ini tidak lain agar pengunjung dipermudahkan mencari artikel yang mereka butuhkan.

Dibawah ini adalah contoh yang kita bahasa saat ini :

Artikel Islam

  1. Aku Menyaksikan Tangismu
  2. Allah dan Tuhan
  3. Alnor: Cahaya Islam di Puncak Bola Dunia
  4. Cat Steven: Islam Menyelamatkanku
  5. Dulu Ulama Dirangkul, Kini Mereka Diburu
  6. Eropa 2050: Benua Islam Terbesar di Dunia
  7. Jabatan Adalah Amanah
  8. Kaskus Jadi Situs Penghina Islam?
  9. Keturunan Sitti Fathimah
  10. Laskar Muslim Siap Hadang Pintu Dagang Israel Ke RI
  11. Muallaf Kontroversi Jerman Menangkan Penghargaan Al-Quran
  12. Murid-Murid Florida Berlomba "Setankan Islam"
  13. Puluhan Ribu Umat Solo Serukan : Islam Bukan Teroris

Document

  1. Allah dan Tuhan
  2. Alnor: Cahaya Islam di Puncak Bola Dunia
  3. Cat Steven: Islam Menyelamatkanku
  4. Dulu Ulama Dirangkul, Kini Mereka Diburu
  5. Eropa 2050: Benua Islam Terbesar di Dunia
  6. Kaskus Jadi Situs Penghina Islam?
  7. Keturunan Sitti Fathimah
  8. Laskar Muslim Siap Hadang Pintu Dagang Israel Ke RI
  9. Muallaf Kontroversi Jerman Menangkan Penghargaan Al-Quran
  10. Murid-Murid Florida Berlomba "Setankan Islam"
  11. Puluhan Ribu Umat Solo Serukan : Islam Bukan Teroris

Komputer

  1. ILMU PENDIDIKAN DALAM PERSPEKTIF ISLAM
  2. Macam macam Serial Number Windows
  3. Pengenalan Hardware Komputer
  4. Pengertian CPU
  5. Pengertian Keyboard
  6. Pengertian Mouse
  7. Pengertian Processor
  8. Peran TIK dalam pembelajaran
  9. Portable Ms Office 2007
  10. Sekarang Satu Komputer Untuk 2.000 Siswa
  11. Televisi Pendidikan

Modul Office Excel

  1. Contoh Diagram
  2. Membuat 2 tabel sekaligus dalam excel
  3. Membuat Garis Tabel pada Microsoft Office Excel
  4. Membuat nomor urut di Excel
  5. Membuat sebuah grafik dengan data yang di ambil dari tabel
  6. Mengatur Default Directory Penyimpanan File Excel
  7. Mengetahui Nilai Total, Rata-rata, Maksimal dan Minimal dalam Microsoft Office Excel
  8. Menggabungkan Sel
  9. Menggunakan Fungsi IF dan VLOOKUP Pada MS Excel
  10. Mengubah Baris menjadi Kolom
  11. Penggunaan Fungsi (Rumus) IF
  12. Proteksi Sheet pada Microsoft Office Excel
  13. membuat tabel pada Microsoft Office Excel

Modul Office Word

  1. File Doc jadi Exe?
  2. Format Font dalam Microsoft Office Word
  3. Format pengaturan tata letak teks dalam satu alinea dalam microsoft office word
  4. Fungsi Tabulasi
  5. Membuat Daftar Isi
  6. Membuat Nomor Halaman
  7. Membuat Tabel pada Microsoft Office Word
  8. Membuat dokumen baru dalam Microsoft Office Word
  9. Membuka File .docx Tanpa Word 2007 atau Mengkonversikan ke Bentuk .doc
  10. Menggunakan Microsoft Word Untuk Membuat Teks Lorem Ipsum
  11. Menghapus huruf, kata dan kalimat dalam Microsoft Office Word
  12. Menulis rumus-rumus matematika dalam microsoft office word
  13. Merubah Format Huruf dengan cepat
  14. Pengenalan Microsoft Excel 2003
  15. Pengenalan Microsoft Office Word 2003
  16. Shortcut Microsoft Office Word

Tips Trik Blogspot

  1. Background Berbeda-beda Setiap Halaman
  2. Blog Transparent
  3. Cara Megnatur Judul Sidebar
  4. Cara Membuat Drop Cap Pada Postingan
  5. Cara Membuat Marque (Teks Berjalan)
  6. Cara Membuat Menu Tab View
  7. Cara Membuat Recent Comments
  8. Cara Membuat Tab View Link - New !!
  9. Cara Mengatur Judul Sidebar
  10. Cara Mengganti Background Blogger
  11. Cara Mengganti Icon Pada Adress Bar
  12. Cara Pasang Flash di Blog
  13. Daftar Isi Berdasarkan Label - New !!
  14. Efek Kembang Api di Halaman Blog
  15. Efek Tulisan Teks Pada Blog
  16. Gambar Selalu Di Pojok
  17. Hantu Berkeliaran di Halaman Blog
  18. Judul Blog Menjadi Judul Postingan
  19. Kursor Bermesraan Dengan Teks
  20. Kursor Bersama Bintang Kecil
  21. Membagi Header Menjadi Dua Kolom - New !!
  22. Membuat "Tag Cloud" Widget
  23. Membuat 3 Kolom/Elemen di Atas Footer
  24. Membuat Buku Tamu Tersembunyi
  25. Membuat Daftar Isi Blog
  26. Membuat Efek Roaming Windows
  27. Membuat Link Pelangi
  28. Membuat Multi Level Drop-Down Menu Dengan CSS dan JQuery
  29. Membuat Readmore Otomatis
  30. Membuat Tab View di Bawah Postingan - New !!
  31. Membuat teks Area Blog
  32. Menambah 4 Kolom/Elemen Halaman di Atas Footer
  33. Menambah Elemen di Atas 2 Kolom
  34. Menambah Fitur Replay Pada Kotak Komentar
  35. Menambah Kolom Elemen Sidebar Blogspot - New !!
  36. Menghilangkan Navbar Blogspot
  37. Menu Tab View Widget
  38. Pasang TV Bagian 2
  39. Pasang TV di blog
  40. Pesta Kembang Api di Halaman Blog
  41. Posting Blog Mengunakan MS Office Word2007
  42. Recent Post Slide Show
  43. Tabber tab dengan JQuery part 2
  44. Translate Versi Google
  45. Widget dari BlogCatalog

Tips Trik Facebook

  1. Cara Bikin Status Facebook Lebih Menarik
  2. Cara Memblokir Teman Di Facebook
  3. Cara Membuat Catatan Facebook
  4. Cara Mengembalikan Akun Facebook yang di Hack - New !!
  5. Cara Menghapus Iklan Di Profil Facebook
  6. Efek Keren di Template Facebook anda
  7. Facebook Haram
  8. Fitur Baru dari Facebook
  9. Hack Foto Profil Facebook
  10. Main Facebook Di Blog !?
  11. Penyebab Kata Sandi Facebook Bisa Dicuri - New !!

Tips Twitter

  1. Cara Mudah Daftar di Tuitter - New !!

Tips dan Trik Twitter

  1. Cara Mudah Daftar di Tuitter - New !!

Tips dan Trik Wordpress

  1. Background Gambar di Belakang Postingan - New !!
  2. Cara Buat Pages atau Halaman Statis WordPress
  3. Cara Buat Read More di WordPress
  4. Memasang Favicon di Blog WordPress
  5. Membedakan Komentar dari Penulis
  6. Membuat Blog di WordPress Com
  7. Menampilkan Related Post Berdasarkan Kategori
  8. Mengaktifkan Widget di Sidebar
  9. Tutorial Blog WordPress

Tutorial Twitter

  1. Cara Mudah Daftar di Tuitter - New !!

Widget

  1. Cara Membuat Menu Tab View
  2. Cara Membuat Recent Comments
  3. Cara Membuat Tab View Link - New !!
  4. Cara Pasang Flash di Blog
  5. Featured Content Slider Using JQuery
  6. Main Facebook Di Blog !?
  7. Membuat "Tag Cloud" Widget
  8. Membuat Buku Tamu Tersembunyi
  9. Membuat Link Pelangi
  10. Membuat Tab View Model 2 - New !!
  11. Mengaktifkan Widget di Sidebar
  12. Menu Tab View Widget
  13. Pasang TV Bagian 2
  14. Recent Post Slide Show
  15. Translate Versi Google
  16. Widget dari BlogCatalog
Berikut ada 2 script, yang pertama tanpa scroll dan yang kedua menggunakan fasilitas scroll (biar ga kepanjangan)

1. Untuk yang biasa :
<script style="text/javascript" src="http://kangfatur.googlecode.com/files/daftar%20isi%20label.js"> </script>
<script src="http://www.coretan-guru-komputer.co.cc/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
2. Untuk yang menggunakan scroll
<div style="overflow:auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 400px; background-color: none; text-align: left;">
<script style="text/javascript" src="http://kangfatur.googlecode.com/files/daftar%20isi%20label.js"></script>
<script src="http://www.coretan-guru-komputer.co.cc/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<p>
</div>
Catatan : Ganti kode warna orange dengan alamat URL Sobat.

3. Klik Simpan. Selesai

Naah setelah semua langkah langkah sobat jalani dan tanpa ada masalah apapun diperjalanan sekarang sobat tinggal lihat hasilnya pasti mantaaap. Semoga postingan kali ini bermanfaat bagi sobat semua, Selamat mencoba
at 8:00 PM 0 comments
Labels:
Posted by djcapoenk

Membuat Readmore Otomatis

Fungsi Readmore/baca selengkapnya pada posting adalah untuk menghemat halaman depan website/blog agar tidak terlalu panjang, selain itu juga dapat merangsang pengunjung untuk membaca salah satu posting di halaman depan website/blog kita.

Nah jika berkeinginan untuk pasang readmore otomatis pada blogspot Sobat, silahkan ikuti langkah-langkahnya sebagai berikut:

Sebelum memulai memasang readmore otomatis pada blogspot/blogger Sobat, ada baiknya perhatikan hal-hal sebagai berikut :

1. Download dan simpan template Sobat terlebih dahulu, karena jika pemasangan gagal Sobat masih bisa mengembalikan blog Sobat seperti semula;

2. Jangan lupa untuk memberi tanda centang pada tulisan Expand widget template;

3. Untuk memudahkan pencarian code, gunakan tombol Find, caranya pada browser Sobat klik pada menu Edit lalu pilih Find atau melalui keyboard komputer Sobat, tekan Ctrl + F, lalu copy paste code yang mau dicari ke dalam kotak Find lalu Enter/Next;

4. Ini yang paling penting, apabila sebelumnya Sobat sudah menggunakan Readmore versi lama, maka hapus dulu codenya.

Adapun langkah-langkah Cara Pasang Readmore Otomatis adalah sebagai berikut:

1. Seperti biasa Login ke Account Blogger Sobat;

2. Masuk ke halaman Edit HTML, lalu diatas kode </head> letakkan script di bawah ini:
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
3. Cari dan ganti kode dengan semua kode dibawah ini:
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READMORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

# KETERANGAN:

Biasanya kode: <data:post.body/> berada di bawah kode:<data:post.body/>
, maka untuk memudahkan pencarian kode tersebut gunakan tombol Find seperti penjelasan di atas.


# Simpan/Save Template, selesai.



Keterangan:


Kita dapat menentukan letak tumbnail (gambar), jumlah karakter tulisan baik tanpa maupun dengan tumbnail serta tinggi dan lebar tumbnail pada postingan dengan cara merubah kode orange tebal di atas dan berikut penjelasannya :


1. var thumbnail_mode = "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;


2. summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;


3. summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;


4. img_thumb_height = 120;: Tinggi thumbnail dalam ukuran piksel;


5. img_thumb_width = 120;: Lebar thumbnail dalam ukuran piksel;


6. READMORE-: Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” dan apabila sobat tidak ingin menampilkan judul dibelakang Readmore, Sobat bisa menghapus code script ini .
at 6:42 PM 0 comments
Labels:
Posted by djcapoenk

Wednesday, August 11, 2010

Cara Membuat Background Berbeda-beda tiap Halaman di Blog

Halo para sobat bloger Ine jalan-jalan eh...ketemu blog kang fatur yang sangat menarik...trus Ine copy dech postingnya...tapi dah izin lho...hehe...kali nie mao bagi bagi dengan sobat tercinta,lumayan dech buat tampil agak lain dari yang lain. Narsis gitu ..., dan pengunjung ngga bakalan bosan menjelajah blog kita karena bisa tampil dengan background yang berbeda-beda di setiap halamannya O.K.



O.K. Jangan banyak banyol bentar lagi hari semakin malam, duduk udah pegal, kopi udah abis, rokok tinggal sebatang, perut udah laper, sebaiknya kita lanjutkan aja O.K.



Persiapan :



Memasang background utama :



Background utama yang kumaksud di sini adalah script backgroud yang terpasang langsung di Template blogmu, alias terpasang pada struktrur htmlnya. Ok kita lanjut yach.



1. Kopi kode di bawah ini, lalu edit dengan menggunakan worpad atau document txt.



2. Gantilah http://alamat-gambar-sobat yang berwarna merah dengan url gambar sobat.



3. Kode center no-repeat; (kuning) bisa sobat ganti dengan left atau right. Ini adalah kode yang mengatur tata letak gambar pada blog sobat, apakah mau di taruh di tengah, di kanan atau di kiri.



4. Kode no-repeat; boleh sobat hapus bila akan menggunakan gambar yang kecil dan memerlukan pengulangan agar gambarnya menjadi penuh.



5. Kalau sudah selesai ngeditnya , balik lagi ke blog sobat. Cari kode seperti di bawah ini :



5. Hapus seluruh kode di atas, lalu gantikan dengan kode hasil editan sobat tadi.



6. Jika udah beres, klik SAVE



Nah sampai pada tahap ini, sobat sudah bisa melihat perubahan background blog sobat, klik aja View Blog.



Memasang background untuk halaman depan :



Halaman depan adalah halaman atau tampilan utama blog sobat. Di halaman ini sobat menempatkan berbagai widget/aksesoris yang wajib ada di halaman depan, diantaranya semisal tab menu, link para sobat kita, label, buku tamu atau widget-widget lain yang kita anggap perlu demi memudahkan pengunjug menjelajah isi blog kita.



Kerja kita kali ini agak sedikit praktis, karena css background dipasang seperti layaknya kita menambah widget/aksesoris ke sidebar blog.



Langkah pertama :



a. Copy script di bawah ini :



b. Edit dengan menggunakan wordpad atau document.txt.



c. Ganti http://alamat-gambar-sobat (kode yang berwarna merah ) dengan url gambar sobat



d. Ganti kode (yang berwarna biru) dengan left atau right, kode ini merupakan kode yang mengatur letak gambar sobat itu nantinya.



e. Kode no-repeat; bloeh sobat hapus kalo memakai gambar dengan ukiran kecil atau berupa motif yang memerlukan pengulangan untuk bisa tampil penuh pada seluruh halaman



Langkah ke-dua :



Sekarang kita memasuki tahap kedua dimana kita akan memasang kode hasil editan tadi ke sidebar blog. pasti udah pada bisa dech. Namun ngga ada salahnya kalau kang fatur uraikan kembali di sini. yuuuu ...



Seperti biasa :



1. Login ke blogspot.

2, Klik Customize.

3. Klik Layout.

4. Klik Add a Gadget.

5. Pilih HTML/JavaScript.

6. Beri nama CSS1 pada kolom titel atau kolom judul, ini hanya penamaan saja. Terserah terserah sobat dikasih nama apa. Yang jelas, nama ini untuk mempermudah kita mencari widget ini nanti di ruang edit html.

7. Pastekan kode hasil editan kita tadi ke ruang conten.

8. Terus Save.



Langkah ke-tiga :



Sekarang kita masuk pada langkah ke_tiga, dimana kita akan mengatur kode css backround yang kita pasang dengan nama CSS1 pada sidebar tadi supaya tampil pada halaman depan dan akan menghilang bila kita bergerak ke halaman selanjutnya. Udah siap??? let's go ...



1. Login ke blogspot.

2, Klik Customize.

3. Klik Layout.

4. Klik Edit HTML

5. Conteng kotak Expand Widget Templates

6. Cari kode seperti di bawah ini : Kode yang berwarna biru merupakan kode tambahan yang membuat css background hasil editan kita tadi tampil di halaman utama atau front page.



7. Klik save, lantas klik view blog untuk melihat hasilnya.



Ok, kita sekarang sudah punya 2 buah backround berbeda, istirahat dulu. Besok baru diteruskan lagi. Tapi kalo mau dilanjutkan ... yuuuuuk ...

OK...di tunggu commen'nya ya...
at 6:40 PM 0 comments
Labels:
Posted by djcapoenk
Subscribe to: Posts (Atom)