Free pdf converter dari pdfzilla

Ada kabar baik dari PDFZILLA.com, mereka mengabarkan bahwa produk unggulan mereka yang bernama “PDFZilla” seharga $29.95 diberikan secara free alias gratis.

Tidak seperti layaknya produk gratis lain yang memerlukan registrasi, untuk mendapatkan PDFZilla anda hanya perlu mengunjungi halaman giveaway, download software tersebut lalu aktifkan dengan kode registrasi (registration code) yang diberikan pada halaman tersebut.

Fitur-fitur PDFZilla

Convert PDF to Word
Convert PDF to Word with all text and Graphical data.
Convert PDF to RTF
Convert PDF to Rich Text Files. You can edit all text and graphic by Windows Wordpad.
Convert PDF to TXT
Convert PDF to plain text files. You can edit text by Notepad.
Convert PDF to Images
Convert PDF to BMP, JPG, GIF or TIF files.
Convert PDF to HTML
Convert PDF to HTML files and automatically generate the Index file.
Convert PDF to SWF
Convert PDF to Shockwave Flash Animation files which can be published on websites.
Page Selection
Convert all the pages, or partial pages of PDF file.
Easy to use software
Add a PDF File -> Select the Output File Format -> Click on Start Converting button, then just have a cup of coffee :)

Berikut tampilan dari FDFZilla

Promo ini akan berakhir hingga 5 Februari 2011, jadi jangan tunggu lama karena waktunya terbatas.

Download PDFZilla + Key Registration

Read More

Cara Buat Kotak Iklan 125 x125 di Blog

* Log in ke account blogger anda


* Pada dasbord --> Design --> Edit HTML

* Cari kode berikut ini  ]]></b:skin>

* Kemudian taruh kode CSS dibawah ini diatasnya

#Johan-ads {

margin: 0px;

padding: 5px;

text-align: center;

}

#Johan-ads img {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #c0c0c0;

}

#Johan-ads img:hover {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #333;

}

* Klik Simpan

* Selanjutnya Pada Elemen Laman --> Pilih Tambah Gadget --> Pilih HTML/Javascipt

* Kemudian anda  memasukan kode dibawah ini.

<div id="Johan-ads">

<a target="_blank" href="http://johanrakyat.blogspot.com/"><img alt="ads" src="http://penyamun.fileave.com/iklan%20125.jpg" border="0" /></a>

<a target="_blank" href="http://johanrakyat.blogspot.com/"><img alt="ads" src="http://penyamun.fileave.com/iklan%20125.jpg" border="0" /></a>

<a target="_blank" href="http://johanrakyat.blogspot.com/"><img alt="ads" src="http://penyamun.fileave.com/iklan%20125.jpg" border="0" /></a>

<a target="_blank" href="http://johanrakyat.blogspot.com/"><img alt="ads" src="http://penyamun.fileave.com/iklan%20125.jpg" border="0" /></a>

</div>

Klik Save Selesai

Read More

Cara Buat Scroll Box untuk Widget

Meletakkan sesuatu widget adalah bagus untuk blog. Walau bagaimanapun, adakalanya widget tersebut boleh 'menggangu' pandangan jika mengambil ruang yang agak besar untuk blog.


Salah satu penyelesaianya adalah dengan menjadikan widget tersebut boleh scroll. Ini secara tidak langsung dapat mengurangkan ruang yang digunakan dan menjadikan blog anda nampak lebih kemas.

Scroll box ini juga sesuai dengan apa sahaja widget yang anda mahu.Secara ringkasnya, apa sahaja widget yang guna kod HTML boleh guna cara ini untuk jadikannya scroll.:)

Tutorial untuk membuat scroll box adalah seperti berikut..

1. Dari dashboard > design > add a gadget > HTML/javascript(Jika anda sudah letakkan widget hanya buka HTML/javascript widget yang anda telah letak di blog)

2. Kemudian masukkan/ubah kod widget seperti berikut.

<div style="width:426px;height:100px;overflow:auto; ">

Letakkan kod widget anda disini

</div>

Note :width: ubah mengikut lebar yang anda kehendaki
           height: ubah mengikut tinggi yang anda kehendaki

3. Apabila selesai, save dan lihat hasilnya..

Read More

Update Minor Page Rank

Sepertinya kemaren malam beberapa blog kang Rohman mengalami update page rank, ada yang turun ada yang naik, namun kebanyakan adalah masih tetap. Jadi, mungkin ini adalah update minor atau prosesnya masih berlangsung.

Bagaimana dengan google page rank blog anda, ada perubahan?

 

Selamat untuk yang naik Page Rank nya semoga cari duitnya makin lancar

Read More

Cara Nak Tukar "Older Posts", "Newer Posts", dan "Home" Dengan Image Icon

Hi,friend! Sekarang kita belajar cara nak tukar "Older Posts", "Newer Posts", dan "Home" dengan image icon. Usually "Older Posts", "Newer Posts", and "Home"terletak di bawah blog kita.

Fungsi ini mengarahkan kita untuk pergi ke laman lain, baik posting lama halaman atau baru laman posting. Biasanya, arahan ("Older Posts", "Baru Posts", "Home") adalah hanya sebuah kata, maka kita akan mengubah kata itu menjadi sebuah ikon.jika anda ingin trik ini,ikuti langkah-langkah dibawah:

1. Log in to your blogger icon
2. Go to Design>>>Edit HTML
3. Thick "Expand Widget Templates"
4. Then find this code :

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>


<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>


<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>


</div>

5. Tukarkan link yang berwarna biru dengan link image anda

                               <img border='0' src='ICON URL'/>

Contoh :


<img border='0' src='https://sites.google.com/site/genkitemplate/olderpage/home.png'/>                <img border='0' src='https://sites.google.com/site/genkitemplate/olderpage/previous.png'/>


                <img border='0' src='https://sites.google.com/site/genkitemplate/olderpage/Newer.png'/>


Akan jadi macam nie:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img border='0' src='https://sites.google.com/site/genkitemplate/olderpage/Newer.png'/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img border='0' src=''https://sites.google.com/site/genkitemplate/olderpage/previous.png'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img border='0' src='https://sites.google.com/site/genkitemplate/olderpage/home.png'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img border='0' src='https://sites.google.com/site/genkitemplate/olderpage/home.png'/></a>
</b:if>
</b:if>

</div>

 6.Jika sudah,Save dan lihat hasilnyer...

Note: Anda boleh menukar link image anda sendiri

Read More

Related Posts Selain LinkWithin (Cara Advance)

1. Pertama, masuk dulu ke halaman Edit HTML,
    Jangan lupa memberi tanda centang pada "Expand Widget Templates"

2. Cari kode ini </head> 

3. Kemudian ganti dengan kode dibawah ini

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

4. Sekarang cari lagi kode dibawah

<div class='post-footer-line post-footer-line-1'>

Jika tidak jumpa kode diatas, cuba cari kode seperti ini pulak

<p class='post-footer-line post-footer-line-1'>

Kalau sudah jumpa,cuma masukan semua kode dibawah ini dibawah salah satu dari kode diatas yang anda jumpa tadi.

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

5. Klik Save dan lihat hasilnya.

Untuk menampilkan seberapa banyak jumlah related posts anda boleh mengedit kode dibawah ini:

var maxresults=5;

Untuk mengganti title, anda boleh mengedit kode ini:

var relatedpoststitle="Related Posts";

Selamat Mencuba

Read More

Cara Pasang Auto Read More Dengan Gambar

Mahu pasang Readmore button? xsusah mana pun...Jom try buat...

Caranya mudah,Hanya ikuti langkah-langkah di bawah ini:

1. Masuk ke Design lalu EDIT HTML
2. Centang Expand Widget Templates
3. Cari kode </head>
4. Tambahkan kode berwarna biru berikut dibawah kode </head>

<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>

5.Lalu cari kode <data:post.body/>

6.Ganti kode tersebut dengan kode berwarna hijau di bawah 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'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Yang berwarna merah gantikan ayat sesuai dengan keinginan Anda...

7. Save Template.

8.View Blog..!!!

Bagi yang ingin mengganti tulisan 'Readmore' atau 'Baca Selanjutnya' dengan image atau gambar seperti dibawah ini:

1. Cari kode berikut
READ MORE - <data:post.title/>


2. Ganti dengan kode berikut
<img border='0' src='URLGAMBAR' alt='Read More' />

Ganti tulisan warna merah dengan url gambar / image readmore anda,
kalau tidak ada,cuma copy code image readmore berikut:

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJal9qrFgSO8naKeKJX0gMCxSS9TOGhhsX2WEjvJRa9K0Q4A5UMC7VTb9C5xNxFLHxZDTjuVuNcyNggczBu_9tF1sZB97JrRsWFDIb-e2ov31Bg4o9w515Zw1MxDxIadd-x9bcVZcKJJCB/s320/read+more_thumb%5B1%5D.png' alt='Read More' />

Read More

nice blogging worker

belajar blogging bisa dibilang sulit dan mudah, internet ibarat laut yang luas penuh dengan deragam hal-hal yang tak pernah kita sadari keberadaannya ,blogging merupakan awal yang baik untuk memulai berkenalan dengan dunia internet

Read More

Cara Sembunyikan Tulisan Di Posting Blog Guna Spoiler

Spoiler adalah teknik untuk menyembunyikan seluruh atau sebagian isi dari Content posting, dengan tujuan untuk mengjimatkan space halaman posting dan mengurangi lamanya waktu loading web/blog, dimana misalnya posting tanpa spoiler loading memakan waktu 45 saat, maka jika dengan Spoiler cukup dengan 30 saat dan mungkin kurang dari itu (tergantung isi content).

Fungsi Spoiler adalah selain untuk menyembunyikan content berupa text dan kode juga boleh sembunyikan gambar dalam ukuran besar serta video.Cara Kerja Spoiler adalah, content yang ditaruh di dalam spoiler hanya boleh dilihat keseluruhnya oleh pembaca apabila buttonnya diklik.

Untuk membuktikannya silahkan Anda klik tombol spoiler di bawah ini:

Contoh Spoiler

disinilah tempat untuk meletak content dalam spoiler

<div><div style="margin: 10px;">
<div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;"> Contoh Spoiler</span><input value=" please buka!!!" style=" margin:5px;padding: 0px; width: 80px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = ' Tutup Jer...'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' please buka!!!'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
disinilah tempat untuk meletak content dalam spoiler
</div></div></div></div>

Keterangan: 

Copy kod diatas,letak di new post anda....

1. Teks warna Biru adalah Judul Content dan boleh diganti sesuai dengan selera anda, Namun jika tidak ingin menampilkan judul content pada spoiler, silahkan dihapus saja dan nilai margin saya kasih warna biru silahkan diganti menjadi 0 (nol);

2. Teks warna Merah adalah kata perintah tombol spoiler dan boleh diganti sesuai selera Anda.

3. Teks warna Pink adalah tempat menaruh isi content postingan Anda.

Read More

Belajar Wordpress di IdTutorial yuk!

Wordpress merupakan platform blog yang populer di samping blogger, menguasai seluk beluk wordpress merupakan hal yang dirasa cukup penting. Oleh karenanya, belajar wordpress bersama kang Rohman yuk di ID Tutorial.

ID Tutorial sebenarrnya sudah ada sejak lama, namun karena satu dan lain hal blog tersebut menjadi terbengkalai dan di lupakan, di tahun yang baru ini kang Rohman tergeliat kembali untuk mengupdate blog tersebut. Mencoba untuk fokus akan satu hal, sepertinya ID tutorial akan di isi dengan Panduan wordpress atau tutorial wordpress.

Demi merangkul banyak pihak, termasuk para pemula, informasi yang akan disuguhkan mulai dari pembelian domain, hosting, instalasi wordpress, cara operasional wordpress, sampai kepada SEO khusus wordpress.

Mudah-mudahan wajah baru dari ID Tutorial dapat menambah perbendaharaan ilmu anda di samping tutorial-tutorial wordpress yang sebelumnya telah ada beredar di Internet.

Selamat berjumpa di ID Tutorial sobat!

Read More

Submit Blog Anda Guna Sitemap Generator

Sitemap Generator Untuk Submit BlogPostingan ini kadang ada juga gunanya buat yang baru belajar buat blog, sama seperti saya kadang rada bingung juga cara buat sitemaps, sama seperti buku kalo tidak ada daftar isi dan alamat halamannya dimana susah juga bacanya,karena susah pasti males bukanya boro boro mau tau isinya, gua sudaj 4 bulan ngo Blog kadang juga masih bingung..Ini sedikit solusi untuk submit sitemap blog.Salah satu cara agar postingan blog anda cepat terindek oleh mesin pencari seperti Google, Yahoo, atau Bing adalah dengan mengirimkan alamat sitemap blog anda.

Idealnya, file sitemap harus mengandung semua URL dari sebuah situs, tetapi jika blog kita di-host di blogspot.com (atau jika kita menggunakan custom domain), kita akan terkejut kalau tahu bahwa sitemap default file hanya berisi 26 halaman terbaru saja yang terindex dari blog. Lalu bagaimana cara mengatasinya? sebenarnya masalah ini sudah dijelaskan sangat lengkap diblognya Amit Agarwal yaitu seorang blogger populer asal India, jadi silahkan pelajari saja langsung diblognya dialamat ini labnol.org (jangan lupa di translate) Ada satu masalah yang biasanya dipunyai oleh para blogger yang menggunakan mesin blogger atau blogspot adalah URL yang terindek oleh google hanya sedikit, walaupun postingan yang dimiliki sudah mencapai ratusan. Contoh salah satu blog kang Rohman http://blogtemplate4u.com telah mempunyai 121 posting, namun dalam data yang ada pada webmater, URL yang terindeks hanyalah sebanyak 20

 

Pertanyaan ini adalah pertanyaan yang sering sekali ditanyakan oleh para blogger yang menggunakan mesin blogspotCara untuk mengatasi error sitemap di gogle webmaster adalah dengan menggunakan Blogger Sitemap Generator. Dengan menggunakan Blogger Sitemap Generator kita dapat membuat sitemap untuk blog kita dan terbukti bisa mengatasi masalah tidak terindek nya postingan kita.

 

Berikut cara menggunakan Blogger Sitemap Generator :

 1. Silahkan klik butoon START dibawah untuk ke Sitemap Generator :

Masukan alamat blog anda pada kolom yang tersedia, jangan lupa untuk menuliskan secara lengkap alamat blog anda ( misal : http://joharakyat.blogspot.com ), lalu Klik tombol Create Blogger Sitemap.

 

4. Catat alamat sitemap yang telah dibuat atau copy paste pada notepad atau yang lainnya,

     contoh :atom.xml?redirect=false&start-index=1&max-results=500

 

5. Masukkan alamat sitemap di google webmasters tools, Buat rekan yang sudah mengerti cara submit blogger sitemap digoogle webmaster tools bisa langsung mengunakan Blogger sitemap generator, sebenarnya tidak hanya untuk google saja, rakan juga dapat mengirim dengan melakukan ping Sitemap langsung ke Yahoo dan Bing.

Untuk anda yang mempunyai postingan lebih dari 500, maka alamat sitemap yang harus disubmit adalah lebih dari satu alamat sitemap, 

contoh :
 * atom.xml?redirect=false&start-index=1&max-results=500 
 * atom.xml?redirect=false&start-index=501&max-results=500 

 * atom.xml?redirect=false&start-index=1001&max-results=500 

 * atom.xml?redirect=false&start-index=1501&max-results=500 

 * atom.xml?redirect=false&start-index=2001&max-results=500 

 Mudah-mudahan dengan cara ini membuat sitemap blog anda lebih cepat di index oleh google, dan mudah-mudahan pengunjung blog anda bisa lebih meningkat dari search engine.

Read More

Auto Backlink Generator-Tutorial SEO

Saya ingin kongsikan dengan anda semua salah satu cara saya mendapat Backlink sesuatu Blog dengan cepat.

1.Auto Backlink Generator 

Dan yang ini juga 

2. Auto Backlink Feed Generator 

 

Yang ini ada perlu letakkan RSS Feed blog anda.Selesai!

Read More

Posting Kod HTML/Javascript di Blogspot

Tips pendek kali ini adalah berkenaan kod html/javascript diposting blog anda. Mungkin pernah anda menulis di artikel untuk highlight kod html. Bila anda posting, hilang pula kod html itu... Dan ada juga yang tertanya-tanya bagaimana wak paparkan kod html di blog ini.Sebenarnya ada tools internet yang ada untuk convert html untuk dipaparkan diposting blog anda. salah satunya gadjet dari pakcik google ini pun boleh digunakan.. Tak silap ada beratus tools sebegini.. Anda pilih dan gunakanlah mengikut kesesuaian anda ya..

Read More

Jquery Tab Menu Accordion versi 2!

Jika anda ingin menjimatkan ruang dibahagian sidebar, anda boleh mencuba Jquery Tab Menu Accordion seperti yang boleh dilihat pada demo di sini(sila klik). Pada Jquery Tab Menu Accordion tersebut, anda boleh masukkan berbagai jenis widget seperti Shout box, Top Post,Recent Post, Recent Comment, Top Commentator dan sebagainya mengikut citarasa anda sendiri. Jquery tab menu accordion ini semamangnya sangat menarik dan mudah kerana anda hanya perlu meletakkan cursor mouse pada title tab menu tersebut.

Untuk memasang Jquery tab menu accordion sila ikut beberapa langkah yang mudah dibawah.

Langkah 1

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.

Copy dan paste kod di bawah pada content HTML/Javascript.

 <style type="text/css">

h5 {

font-family: trebuchet-ms, arial, tahoma;

font-size: 13px;

padding: 0 0 1em;

font-weight:bold;

color: #ffffff;

}

.msg_list {

list-style: none;

margin: 0;

padding: 0;

width: 100%;

}

.msg_head {

padding: 5px 10px;

cursor: pointer;

position: relative;

background-color:#F80680;

margin:1px;

}

.msg_body {

padding: 5px 10px 15px;

background-color:#F4F4F8;

}

</style>

<script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script>

<script type="text/javascript">

$(document).ready(function()

{

//hide the all of the element with class msg_body

$(".msg_body").hide();

//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked

$("#firstpane h5.msg_head").click(function()

{

$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");

});

//slides the element with class "msg_body" when mouse is over the paragraph

$("#secondpane h5.msg_head").mouseover(function()

{

$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");

});

});

</script>

<div class="msg_list" id="secondpane">

<h5 class="msg_head">Tajuk 1</h5>

<div class="msg_body">

Masukkan kod disini.

</div>

<h5 class="msg_head">Tajuk 2</h5>

<div class="msg_body">

Masukkan kod disini.

<h5 class="msg_head">Tajuk 3</h5>

<div class="msg_body">

Masukkan kod disini.

</div>

</div>

Untuk mengubah warna background title box, title font dan background accordion box, sila edit kod yang di bold dengan warna biru.

color: #ffffff;  ( title font )
background-color:#F80680; ( background title box )
background-color:#F4F4F8; ( background accordion box )

Untuk memasukkan widget seperti Shout box,Top Post,Recent Post, Recent Comment, Top Commentator dan sebagainya, gantikan teks Masukkan kod disini. dengan kod widget yang anda inginkan.

Edit teks Tajuk, 1 Tajuk 2, dan Tajuk 3 dengan title yang anda inginkan.

Langkah 2

Akhir sekali, klik Save

Sumber: maribinablog

Read More

Cara buat Kotak Scrollbar Pada Posting Blog-Tutorial

Kotak ini bisa di scroll kekanan dan kebawah untuk menemukan teks lain yang tersembunyi sehingga boleh menjimatkan ruang pada blog kita.Untuk membuat kotak ini caranya sangat mudah:
1. Buka Blogger. Klik menu Design -> Page Elements 
2. Klik Add a Gadget lalu klik HTML/Javascript 

3. Masukkan kode yang dibawah ini:

<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Kotak scrollbar adalah sebuah kotak yang boleh digulung kekanan atau kebawah sehingga bisa menjimatkan ruang pada blog</div>

Maka hasilnya akan seperti ini: 

Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog

Jika Anda ingin menambahan gambar kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal diatas dengan <img src="alamat url gambar Anda" />Catatan:Ganti teks biru yang dicetak tebal dengan alamat alamat gambar anda contoh http://lh4.ggpht.com/_15FopxVONSo/SSlTogZcU-I/AAAAAAAAA18/EqRgvye_cNU/herman%20blog%20headline%20v6.gif 


Sebagai contoh saya memasukkan:

<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 300px; height: 80px; background-color: rgb(255, 255, 255);"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSpQjWxf9JWIa6lPDzxAeTOb-39QRUN1_XXQbwvSSoqu8XW6hQ1X_-6sP1i8wlytrnFxtwOekiL-lozJOoomTqNxVWT9yGDR8t6KClIGHehynz3Ty5OYtPGZ-9cM8H78XAf1rg85YzCVhY/s320/cuti-cuti+cinta.jpg" /></div>

Maka hasilnya akan seperti ini

4. Kalau sudah. Klik Save lalu klik View Blog untuk melihat hasil tampilannya

Kode Terbaru Cara Auto 
Tukar tulisan warna merah dengan tulisan anda

 <div style="border: 1px inset rgb(108, 122, 125); margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span class="fullpost"><blockquote>Letak tulisan anda disini Letak tulisan anda disini Letak tulisan anda disini Letak tulisan anda disini </blockquote>
</span></div>

 

Selamat Mencuba!!?

Read More

Buat Scroll Box Untuk Blog Archive-Tutorial

Bagi yang rajin update. Blog Arhieve akan jadi panjang. So eloknya buat jenis scroll bagi jimatkan ruang blog dan juga nampak lebih kemas.

STEP 1

DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES>DOWNLOAD FULL TEMPLATE 

*Apa-apa pun sebelum edit html, korang mestilah buat backup sebagai langkah berjaga-jaga.

STEP 2
Tekan keyboard, CTRL+F secara serentak.Cari code; <div id='ArchiveList'>

STEP 3

Di atas coding step 2,
Sila copy dan paste coding; <div style='overflow:auto; width:ancho; height:100px;'>

*height=korang boleh ubah berapa panjang kotak scroll yang korang nak.

STEP 4

Di akhir coding step 2 tue, korang kena masukkan penutup coding bagi step 3 iaitu </div>

Contoh coding;

<div style='overflow:auto; width:ancho; height:300px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div> </div>
<b:include name='quickedit'/>

**hint masukkan code </div> sebelum coding <b:include name='quickedit'/>

STEP 5Klik
Preview dan Save jika tiada sebarang error serta berpuashati.

Selamat mencuba ye...

Read More

Cara Membuat Multi Kolum Footer Widgets - Terbaru!

Widget baru ini boleh menjadi tiga medan, empat medan atau berapa banyak medan yang anda inginkan. Selanjutnya widget  footer yang baru mempunyai beberapa kesan CSS yang besar ditambah ke dalamnya yang membuatnya lebih baik. Pertama melihat demo untuk mengetahui apa yang sangat berbeza tentang hal itu.Lihat widget di bahagian bawah blog Demo berikut,

Cara Tambah Multi Kolum Footer Widgets Untuk Blogger ?Pertama kita akan menambah kod CSS untuk anda blogger template dan kemudian HTML. Jadi tanpa membuang masa membolehkan melompat terus ke langkah-langkah berikut,
1. Go To Blogger> Design> Edit HTML
2. Backup Template anda
3. Search for ]]></b:skin>
4. Tepat di atas ]]></b:skin> paste kod di bawah ini,

  /*----- MBT MULTI COLUMN FOOTER WIDGET -----*/

    #lower {
    margin:auto;
    padding: 0px 0px 10px 0px;
    width: 100%;
    background:#333333;
    }
    #lower-wrapper {
    background:#333333;
    margin:auto;
    padding: 20px 0px 20px 0px;
    width: 960px;
    border:0;
    }
    #lowerbar-wrapper {
    background:#333333;
    float: left;
    margin: 0px 5px auto;
    padding-bottom: 20px;
    width: 23%;
    text-align: justify;
    color:#ddd;
    font: bold 12px Arial, Tahoma, Verdana;
    line-height: 1.6em;
    word-wrap: break-word;
    overflow: hidden;
    }
    .lowerbar {margin: 0; padding: 0;}
    .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
    .lowerbar h2 {
    margin: 0px 0px 10px 0px;
    padding: 3px 0px 3px 0px;
    text-align: left;
    border:0;
    color:#ddd;
    text-transform:uppercase;
    font: bold 14px Arial, Tahoma, Verdana;
    }
    .lowerbar ul {
    color:#fff;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    }
    .lowerbar li {
    display:block;
    color:#fff;
    line-height: 1.6em;
    margin-left: 0 !important;
    padding: 6px;
    border-bottom: 1px solid #222;
    border-top: 1px solid #444;
    list-style-type: none;
    }
    .lowerbar li a {
    text-decoration:none; color: #DBDBDB;
    }
    .lowerbar li a:hover {
    text-decoration:underline;
    }
    .lowerbar li:hover {
    display:block;
    background: #222;
    }

5 Sekarang cari. </body> dan paste kod berikut persis di atas </body>

<div id='lower'>
<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'> </b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

<div style='clear: both;'/>

</div> </div>

6. Simpan template anda dan anda selesai!
Sekarang, masuklah ke Elemen Laman dan menambah widget anda ke Footer Widgets baru ditambah bahawa akan kelihatan seperti ini,

Anda boleh mengamati bahawa ada empat medan secara lalai dan anda boleh menambah widget yang anda inginkan untuk setiap medan. Jika anda ingin menambah atau mengurangkan jumlah medan menegak kemudian ikuti langkah-langkah di bawah ini.

Cara Customize Widget itu?

Simple jer...Saya fikir warna dan keseluruhan saiz dan padding dan margining cukup sempurna. Satu-satunya hal yang anda perlu menyesuaikan dengan template anda adalah lebar widget dan jumlah medan menegak.

 
1. Dalam rangka mengurangkan atau menambah lebar keseluruhan widget hanya menukar width: 960px;
2. Jika anda ingin mengurangkan jumlah widget ke tiga maka cukup hapuskan bagian kod, 

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

3. Atau jika anda ingin menambah medan tambahan kemudian tambah kod di bawah ini tepat di atas <div style='clear: both;'/>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>

Ingat bahawa lowerbar # merujuk pada jumlah medan. Jadi jika anda ingin menambah medan kelima maka cukup mengganti lowerbar # dengan lowerbar5.Selepas anda telah menambah medan kelima maka ingatlah untuk menukar width: 23%; dengan width: 17%;

Pada pendapat saya cukup hanya empat medan sahaja,ia sudah cukup menarik.....

Read More