Breaking News:

Cara Membuat Judul Blog

Kalau sahabat tidak ingin terlihat judul Blognya seperti aku punya, gampang kok, caranya;

  1. Rancangan.
  2. Edit HTML.
  3. Centang Expand Template Widget.
  4. Cari header h1 dengan cara Ctrl + F.
  5. Nanti anda akan menemukan seperti ini:
#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
}

5. Tambahkan visibility:hidden; setelah color:#FFFFFF;
6. Save.

Maka sahabat akan lihat hasilnya, gampang bukan?. Selamat mencoba.

12.19 | Posted in | Read More »

Cara membuat Artikel Terkait

Cara Membuat Artikel Terkait

Artikel Terkait atau Related Post adalah posting atau artikel yang berhubungan dengan artikel lainnya, berdasarkan atas kesamaan nama kategori atau label postingan. Tetapi artikel tersebut tidak selalu sama topiknya, bisa juga membahas tentang hal lain, tetapi masih mempunyai relevansi dengan tujuan artikel tersebut.

Kali ini Chenk Rahman [CR] akan membahas tentang Cara Membuat Artikel Terkait atau Related Post with Scroll, yaitu related post yang ditampilkan dalam bentuk menu scroll. Untuk lebih jelasnya, silahkan ikuti langkah-langkah berikut ini :

1. Login ke akun Blogger anda.
2. Klik Rancangan, kemudian pilih Edit HTML.
3. Centang Expand Template Widget (saya anjurkan download dahulu template anda).
4. Cari kode seperti ini: <data:post.body/>

* Jika sobat sudah memasang script Read More, maka akan terdapat 2 kode <data:post.body/>. Maka kita pasang script Artikel Terkait atau Related Post di bawah <data:post.body/> yang ke 2 (lebih tepatnya di bawah tag </b:if> .

5. Jika sudah ketemu, maka copy paste-kan kode di bawah ini persis berada dibawahnya :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid
#ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
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;albri&#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>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

6. Cari kode ini : ]]></b:skin>
7. Copy kode di bawah ini dan paste diatasnya.

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}

8. Klik Simpan Template.

= = = = = = = = = > Selamat Mencoba, Semoga Sukses !!! < = = = = = = = = =

Sumber

12.18 | Posted in | Read More »

Cara membuat Kotak

Cara membuat kotak

Anda bisa memasukkan script2 dibawah ini di:
  1. Postingan
  2. Di Templat Entri
Scriptnya ada dalam kotak dibawah, anda bisa klik select All, kemudian pastekan ketempat yang anda inginkan, baik itu di nomor 1 dan 2.
Maka hasilnya akan seperti kotak yang dibawah ini, anda bisa merubah besar garis kotak sesuai dengan keinginan anda, anda bisa mengganti angka pada border 1px menjadi 2,3 atau 4 dst, anda akan lihat nantinya perubahan yang akan terjadi, anda juga bisa merubah warna garis bordernya dengan cara mengganti 000000  dengan warna yang anda inginkan, begitu juga dengan warna beckgroundnya.
Jika anda ingin memasukkan teks anda, andi tinggal copas (Copy Paste) saja ditulisan yang terltulis TULISKAN DISINI. Selesai. gampang bukan?.
Makasih kepada Master Khairul Umam atas tutor ini, saya dapat dari website beliau
  
TULISKAN DISINI

12.17 | Posted in | Read More »

Struktur Template

HOW TO MAKE A BLOGGER TEMPLATE : BLOGGER TEMPLATE STRUCTURE

Blogger team tried to make their product more easier to use and customization for all users with their template design funtion . If you want some changes in fonts ,background ,layout...,this function can help you . But if you want more ? want to make your own blogger blog look like a professional website ? It's time you need to know something about structure of blogger template ,apis ,scripts ... to make your own .
I will make a post series on How to make a blogger template ,so you can make one for yourself or can do the customizsation easily . I will try to make it short ,and easy to understand , hope it helpful for you


Here is the first post on this topic : Blogger template structure

Blogger template is written in xml markup language ,a complete template has 4 section as mentioned bellow(this is my way to describe a template ,not Google ^^ )

1,The first section will contain something like this
This part will define the document bellow is in xml format ,the standard of this xml ,and something else related . I'm not a professional developer and do not know much on xml ,so I can't explain you more about this part ^^ This part is required but fortunately ,we don't need to make anychanges on them .


2,The second section : This section start from <head> to <b:skin> , it contain necessary tags for header ,meta tags , link to favicon... like other html documents . In this section ,we can add favicon ,adding some meta tags for description ,keywords ..


3,The third section : Start from <b:skin> and end at </b:skin> ,it contain CSS tags ,that set the appearance of your blog . This CSS define how an element in blog look like ,such as text color ,font size ,color ,background ... All tags in this part are follow the standard of CSS without any exception or 'CSS tags for Blogger only' ,so if you have some basic knowledge on this field ,you can easily modify them as you want .

4,The forth part start from <body> end at </body> : the main part of a template ,it made up primarily with 'section' and 'widget' . In sections and widgets ,there are Blogger APIs for specific tasks .
We have many 'sections' ,one for showing posts ,others for show banner in header ,or showing footer ...
In the section for showing post ,we have widget for showing single post , widget for showing posts in categories ,widget for showing posts in homepage ...
In a widget ,for instance ,widget showing single post ,we have Blogger APIs for showing date ,time ,post header ,post body ...

Beside APIs,we can use HTML tags to arrange elements and make them display as we want .
This is similar to Wordpress template ,if you ever work with them before .

Other element that I usually use in Simplex's template is scripts . Scripts can be anywhere in part 3 and 4 ,but in some cases ,we need to grouped them or move them to the end of template (before </html>) to avoid conflicting .
That's all for template structure ,in the next posts ,I will go deeper in each part .

Sumber

12.13 | Posted in | Read More »

Create an Image Rotator with Description (CSS/jQuery)

Create an Image Rotator with Description (CSS/jQuery)

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.

Creating an Image Rotator

View Demo of Image Rotator

Step1. HTML – Image Rotator Wireframe

Start by building the html wireframe of the layout. As you can see in the image below, there will be two major sections (the main image section and the thumbnail list section). In addition to the sections for images, the third section, labeled “desc”, will contain the main_image description.

main_image Section HTML

<div class="main_image">
<img src="banner1.jpg" alt="" />
<div class="desc">
<a href="#" class="collapse">Close Me!</a>
<div class="block">
<h2>Title</h2>
<small>Date</small>
<p>Copy</p>
</div>
</div>
</div>

image_thumb Section HTML
Note – The thumbnail list section will be very similar in markup as the main image section, but each will all be encapsulated in its own list item.

<div class="image_thumb">
<ul>
<li>
<a href="banner1.jpg"><img src="banner1_thumb.jpg" alt="Image Name" /></a>
<div class="block">
<h2>Title</h2>
<small>Date</small>
<p>Copy</p>
</div>
</li>
</ul>
</div>

Step 2. CSS – Image Rotator Wireframe

Next, it’s time to style the image rotator’s HTML wireframe with CSS.

main_image section CSS

.main_image {
width: 598px;
height: 456px;
float: left;
background: #333;
position: relative;
overflow: hidden; /*--Overflow hidden allows the description to toggle/tuck away as it slides down--*/
color: #fff;
}
.main_image h2 {
font-size: 2em;
font-weight: normal;
margin: 0 0 5px;
padding: 10px;
}
.main_image p {
font-size: 1.2em;
line-height: 1.6em;
padding: 10px;
margin: 0;
}
.block small { /*--We'll be using this same style on our thumbnail list--*/
font-size: 1em;
padding: 0 0 0 20px;
background: url(icon_calendar.gif) no-repeat 0 center;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
position: absolute;
bottom: 0;
left: 0; /*--Stick the desc class to the bottom of our main image container--*/
width: 100%;
display: none; /*--Hide description by default, if js is enabled, we will show this--*/
}
.main_image .block{
width: 100%;
background: #111;
border-top: 1px solid #000;
}
.main_image a.collapse { /*--This is our hide/show tab--*/
background: url(btn_collapse.gif) no-repeat left top;
height: 27px;
width: 93px;
text-indent: -99999px;
position: absolute;
top: -27px;
right: 20px;
}
.main_image a.show {background-position: left bottom;}

image_thumb section CSS

.image_thumb {
float: left;
width: 299px;
background: #f0f0f0;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;
}
.image_thumb img {
border: 1px solid #ccc;
padding: 5px;
background: #fff;
float: left;
}
.image_thumb ul {
margin: 0;
padding: 0;
list-style: none;
}
.image_thumb ul li{
margin: 0;
padding: 12px 10px;
background: #f0f0f0 url(nav_a.gif) repeat-x;
width: 279px;
float: left;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
}
.image_thumb ul li.hover { /*--Hover State--*/
background: #ddd;
cursor: pointer;
}
.image_thumb ul li.active { /*--Active State--*/
background: #fff;
cursor: default;
}
html .image_thumb ul li h2 {
font-size: 1.5em;
margin: 5px 0;
padding: 0;
}
.image_thumb ul li .block {
float: left;
margin-left: 10px;
padding: 0;
width: 170px;
}
.image_thumb ul li p{display: none;}/*--Hide the description on the list items--*/

Step3. jQuery – Image Rotation Effect

If you are new to jQuery or have not had much experience with it, first go over the basics.

Show Image Description and Set Transparency on Block
To degrade gracefully, the image banner description is set to be hidden at default with CSS (refer to the “.main_image .desc” class in the CSS). We will show the image description if JavaScript is enabled.

$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity

Click and Hover Events for Image List
The following script will change the main_image when a list-item in the image_thumb is clicked. Each line also contains a comment explaining which jQuery actions are being performed.

$(".image_thumb ul li:first").addClass('active'); //Add the active class (highlights the very first list item by default)
$(".image_thumb ul li").click(function(){
//Set Variables
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
var imgDesc = $(this).find('.block').html(); //Get HTML of the "block" container
var imgDescHeight = $(".main_image").find('.block').height(); //Find the height of the "block"

if ($(this).is(".active")) { //If the list item is active/selected, then...
return false; // Don't click through - Prevents repetitive animations on active/selected list-item
} else { //If not active then...
//Animate the Description
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { //Pull the block down (negative bottom margin of its own height)
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 ); //swap the html of the block, then pull the block container back up and set opacity
$(".main_image img").attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag)
});
}
//Show active list-item
$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all list-items
$(this).addClass('active'); //Add class of 'active' on the selected list
return false;

}) .hover(function(){ //Hover effects on list-item
$(this).addClass('hover'); //Add class "hover" on hover
}, function() {
$(this).removeClass('hover'); //Remove class "hover" on hover out
});

Toggle the Hide/Show Option
This is fairly simple. On each click, either show or hide the description.

$("a.collapse").click(function(){
$(".main_banner .block").slideToggle(); //Toggle the description (slide up and down)
$("a.collapse").toggleClass("show"); //Toggle the class name of "show" (the hide/show tab)
});


Conclusion

Do keep in mind these jQuery driven image rotators do not degrade in the best fashion. As you can see, when you disable JavaScript, each thumbnail must be clicked on to get the larger image (which opens in the same window). But for those who have a user base with JavaScript enabled, you are in the clear and it can be used and customized to fit various scenarios.

Experiment and customize this to fit your needs. If you have any questions, concerns, suggestions, or comments, please do not hesitate to let me know.

Credits: Much appreciation to Glenn Jones for allowing me to use his beautiful illustrations for the example images.

About the Author:

Soh Tanaka is a Los Angeles based Web Designer and blogger, who recently launched a CSS Web Gallery called Design Bombs. For more front-end web development tutorials, check out his web design blog or you can follow him on twitter @SohTanaka


Terjemahkan Sendiri Yah
Sumber

12.11 | Posted in | Read More »

Membuat Daftar isi blog otomatis

Membuat daftar isi blog secara otomatis disini yang maksud adalah, jika kita melakukan postingan baru maka secara otomatis judul blog yang baru akan langsung masuk ke dalam daftar isi tanpa harus melakukan edit pada layout blog kita.

Di postingan lainnya saya juga sudah pernah memposting mengenai membuat daftar isi yang menurut saya jauh lebih cantik, kalo sobat berminat dapat dilihat disini

Dengan trick ini, kita hanya membutuhkan sedikit tempat di halaman blog kita, karena jika pengunjung ingin melihat daftar isi tersebut, maka akan terbuka jendela baru. Sehingga di halaman blog kita cukup dicantumkan dua kata yaitu : Daftar isi, dan bisa kita letakkan di tempat yang kita inginkan.

Caranya seperti langkah-langah berikut ini :

LANGKAH PERTAMA
1. Log in ke blogger
2. Klik Layout di dashboard menu
3. Klik Edit HTML
4. Beri Centang pada Expand Widget Templates
5. Cari kode dibawah ini.

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

6. Ganti Kode diatas dengan kode dibawah ini.

<b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType != "item"'><a expr:href='data:post.url'><div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;"><data:post.title/></div></a><b:else/><b:include data='post' name='post'/></b:if><b:else/><b:include data='post' name='post'/></b:if>

Kemudian ikuti langkah langkah berikut ini :
1. Masuk ke account blogger anda
2. Pilih menu tata letak / Layout
3. Pilih tambah gatged
4. Pilih html/javascrip
5. COPAS kode di bawah ini :

<a href="http://blogmuallaf.blogspot.com/search?max-results=200" target="_blank"><span style="font-weight:bold;">DAFTAR ISI</span>&raquo;</a>


http://blogmuallaf.blogspot.com Ganti dengan alamat blog anda
results=200 ganti dengan jumlah yang anda inginkan, angka 200 menunjukkan jumlah judul yang akan di tampilkan.

Selamat Mencoba..

12.11 | Posted in | Read More »

Instalisasi Windows XP

1- Sebelumnya kamu membutuhkan CD master Windows XP terlebih dahulu kemudian masukan di CDROM/DVDROM kamu. Lalu restart komputer kamu, kemudian nampak tampilan seperti gambar lalu tekan tombol Delete atau F2 (Tergantung Permintaan BIOS) pada keybord agar kamu dapat masuk di BIOS (Basic Input Output System) komputer. Pada beberapa jenis Mainboard harus menekan tombol F2 pada keyboard. Kamu dapat melihatnya pada perintah Press DEL to run Setup.

Kalau mau sistem cepat, tekan F12 pada keyboard anda, maka anda akan diarahkan kepada pilihan dimana terletak boot windows, apakah itu di CD Room, Hardisk atau Flashdisk anda.

2- Lalu kamu akan berada dalam BIOS kemudian pilih Boot pada menu dan pilih item Boot Device Priority seperti pada gambar.
Sebenarnya, tergantung tampilan bios masing-masing setiap motherboard, karna setiap Motherboard memiliki ciri khas tampilan bios masing-masing.
3- Setelah itu Kamu merubah [CDROM] pada posisi 1st Boot Device untuk boot melalui CDROM dengan menggunakan tombol +- di keyboard.Lalu tekan F10 untuk menyimpan konfigurasi kamu.

Kalau kamu menggunakan flasdisk, maka jadikan USB urutan paling atas. Namun tergantung bawaan setiap Motherboard kamu.


4- Restart komputer tunggu hingga muncul tulisan seperti pada gambar lalu tekan sembarang tombol dengan cepat. (Saranku Tekan Space atau Ctrl)

5- Setelah pada tampilan berikut tekan Enter untuk lanjut pada proses instal atau R untuk melakukan reparasi Windows di Recovery Consule atau F3 untuk mengakhiri proses instal.

6- Lanjut pada Lisencing Agreement tekan F8 untuk lanjut dan ESC untuk batalkan proses.


7- Pada gambar posisi partisi belum terisi oleh sistem windows.Tekan C untuk membuat partisi baru pada harddisk dan Enter untuk menginstal. (Ini namanya mempartisi awal ketika masih hardiks baru)


8- Lalu masukan berapa besar kapasitas partisi yang ingin kamu buat dalam satuan megabytes (MB) dan tekan Enter untuk membuat partisinya seperti terlihat pada gambar. (1 GB itu 1000 MB)


9- Kemudian tekan Enter untuk melakukan proses instal atau Delete untuk menghapus partisi.


10- Dan pilih NTFS file system "Jika hardiks anda itu SATA" (Quick) atau FAT file system (Quick) "Jika Hardiks anda IDE"  lalu tekan Enter.


11- Bila proses instalasi langkah 1 → 10 benar maka akan tampil seperti gambar dibawah ini.


12- Setelah itu kamu sampai pada layar berikut Click Next.


13- Lalu isikan dengan Nama dan Organisasi Kamu kemudian tekan Next.


14- Disini Kamu akan mengisikan Produk Key atau Serial Number dari type windows Kamu tekan Next lagi.


15- Isikan nama komputer dan password untuk mengaksesnya lalu tekan Next.


16- Set Time Zone pada posisi (GMT+80:00) klik Next. (Ini nanti juga bisa dilakukan ketika anda sudah selesai menginstal)


17- Typical settings: Pada option ini settingan jaringan akan dibuat default windows dan Custom settings: Untuk mensetting jaringan kamu secara manual lalu klik Next.


18- Bila Kamu terhubung kejaringan local dengan domain pilih option Yes, lalu isi dengan nama DOMAIN yang sama dengan DOMAIN jaringan Kamu dan sebaliknya jika tidak terhubung kejaringan atau terhubung tapi tanpa DOMAIN pilih option No, sekali lagi tekan Next.


19- Selanjutnya Kamutinggal mengklik Ok,Next,Skip dan Finish juga diminta mengisikan nama kamu. hingga Kamu berada pada tampilan Dekstop Windows seperti ini. Sekarang Kamu tinggal menginstal driver hardware CPU Kamu.


Sumber


Semoga bermanfaat, belajarlah, sebab itu penting dan berusahalah menghargai sesuatu yang berharga agar anda mengetahu bahwa ilmu itu memang benar-benar berharga.

12.09 | Posted in | Read More »

Blog Archive