arozaq.com

Showing posts with label Widget. Show all posts

Home » Posts filed under Widget

23.10.10

Cara Membuat Random Post Dinamis

widget random post ini akan menampilkan seluruh postingan blog kita secara acak dengan trik slide show.

Ini akan lebih memaksimalkan semua isi postingan tertampil dengan jeda waktu yang dapat kita atur. Dan satu lagi kelebihan random post ini tidak memakan space yang besar dan sangat simpel.

Jadi, tertarik untuk memasang? ini dia script code-nya:

Cara memasang random post dinami inipun cukup mudah, Silahkan sobat pasang di sidebar : masuk ke blog sobat >> Layout >> Add Gadget >> HTML/Javascript >> copy and paste kode dibawah ini dan tempatkan di HTML/Javascript >> simpan/save >> lihat hasilnya.

Note: Ganti Url yang berwarna merah dengan alamat blog kamu.

27.9.10

Membuat menu D'tree / Windows Explorer

membuat menu Blog menyerupai menu yang ada pada Windows explorer

Langkag-langkahya :
1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Copy paste kode berikut di atas kode </head>

<link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />
<script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>

5. Klik tombol Simpan Template
6. Klik menu Elemen Halaman
7. Klik tulisan Tambahkan sebuah Elemen Halaman
8. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript
Copy paste kode berikut pada kotak yang muncul (jangan lipa menggati linknya)

<div class="dtree">

<p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>

<script type="text/javascript">

</script>

</div>

9. Klik tombol Simpan dan lihat hasilnya....

17.9.10

Cara Pasang Widget Alexa di Blog

Alexa Rank atau Peringkat Alexa adalah sebuah peringkat yang di buat oleh Alexa.com untuk website atau blog berdasarkan banyaknya trafik atau kunjungan.

Langkah-langkah memasang widget Alexa Rank

Langkah #1

1. Klik di sini untuk menuju situs alexa.com

2. Masukan alamat blog anda pada kolom yang terdia. Contoh : a-rozaq.blogspot.com (tanpa http://), lalu klik tombol “Build Widget”.
3. Ada 3 ukuran widget yang bisa anda pilih, copy kode yang ada di sampingnya lalu paste pada notpad atau text editor lainnya. Simpan kode tersebut di komputer anda untuk nanti di masukan ke blog.

Langkah #2

Silahkan login ke blogger.
Klik Tata Letak.
Klik tab Elemen Halaman.
Klik Tambah Gadget.
Klik tanda Plus (+) di samping tulisan HTML/JavaScript.
Paste kode yang tadi ada di notepad kedalam kolom yang muncul.
Klik tombol Simpan.
Selesai.

Mudah-mudahan dengan di pasangnya widget alexa di blog anda, alexa rank blog anda akan cepat bagus (semakin kecil semakin baik rangkingnya).

14.9.10

Mr.Bean ada di Blog

Siapa yang gak tau Mr.Bean ???Ingin Mr.bean ada di blog ??? copi ja kode berikut dan tambahkan ke widget !!!

<div style="position: fixed; bottom: 0px; left: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="138" height="450" title="grab this widget @ widgetindex.blogspot" src="http://5127764844243784301-a-1802744773732722657-s-sites.googlegroups.com/site/widgetindex2/beanbncetextwl.swf" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>

kode Mr.Bean lain yang bisa dipasang di blog !!!

atau yang ini ???

<div style="position: fixed; bottom: 0px; left: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="150" height="380" title="grab this widget @ widgetindex.blogspot" src="https://6073972830965350612-a-1802744773732722657-s-sites.googlegroups.com/site/widgetindex29/mr.bean.swf" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>

lihat hasilnya klik disini.

8.9.10

Memasang Efek Page Peel di Blog

Efek Page Peel adalah Efek seperti lipatan kertas yang ada di pojok kanan atas blog, setiap di sorot oleh mouse akan terbuka lebar.

Langkah-langkahnya.
1. Letakkan kode skrip jQuery berikut ini di atas kode <b:skin><![CDATA[

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</script>

2. Letakkan kode CSS ini di atas ]]></b:skin>

#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}

3. Letakkan kode ini di bawah tag <body>

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/arozaq>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>

Jangan lupa untuk mengganti kode http://feeds2.feedburner.com/arozaq dengan nama feed kamu yang sesungguhnya. Setelah itu simpan perubahan di atas. Lalu lihat hasilnya.

Memasang Kotak Pencarian

Adanya kotak pencarian pada blog, akan mempermudah pengunjung menemukan artikel yang dibutuhkan.
Berikut ini langkah-langkah untuk memasang kotak pencarian:
1. Login ke blogger.com
2. Masuk ke halaman dashboard, pilih layout (tata letak)
3. Klik Add Gadget (Tambah Gadget)
4. Pilih HTML/JavaScript.
5. Pada kotak Content (Konten) masukkan kode berikut:

<form action="http://NamaBlogAnda.blogspot.com/search" method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

6. Ganti NamaBlogAnda dalam kode di atas dengan nama blog anda. Angka 30 setelah kode size dapat diubah
sesuai panjang kotak yang diinginkan. Semakin besar angka semakin panjang kotak.
7. Save, coba lihat hasilnya....

7.9.10

Memasang Tombol Facebook Like di Blogger

Tombol facebook Like berfungsi untuk mempermudah pengunjung blog anda untuk berbagi atau merekomendasikan artikel anda ke teman-teman mereka yang ada di facebook. Hal ini tentu saja apabila postingan anda dirasa bermanfaat bagi mereka dan ingin memberitahukan kepada teman-temannya.

Memasang tombol facebook like merupakan salah satu trik untuk mendapatkan jumlah pengunjung yang melimpah dari mereka para penggemar facebook, mengingat facebook merupakan situs jejaring sosial paling populer saat ini. Jadi, bagaimana cara memasang tombol facebook like di blogger?

Cara mengambil kode Tombol Facebook Like

Pada dasarnya, untuk mendapatkan tombol face book like, anda bisa mengambil dari halaman Facebook develover. Anda tinggal memasukkan beberapa settingan dan kode facebook like akan di generate.
Namun, agar tidak repot khusus untuk tombol facebook like yang kan di pasang di postingan blogger berikut adalah kodenya :

<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&action=like&layout=standard&show_faces=false&width=450&font=arial&colorscheme=light"' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>

Cara pasang tombol Facebook Like di postingan blogger

Untuk pemasangan tombol facebook like, pertama yang harus dipikirkan adalah dimana akan memasangnya? diatas postingan atau di bawah postingan? hal lainnya yaitu apakah tombol tersebut akan muncul terus baik di halaman depan ( homepage) ataupun didalam postingan? atau hanya ingin muncul dihalaman depan saja (homepage)? atau hanya ingin tombol tersebut muncul didalam posting saja?
Secara mendasar, kode posting blogger adalah seperti ini :

<data:post.body/>

Logika sederhana, apabila ingin memasang tombol facebook like diatas posting, tinggal simpan saja diatas kode yang tadi. Sebaliknya, jika anda ingin memasangnya dibawah postingan, tinggal disimpan dibawahnya saja.
Agar tombol facebook like hanya muncul di halaman depan saja (homepage) :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:post.body/>
< kode tombol facebook like disini >
</b:if>
Agar tombol facebook like hanya muncul di halaman posting saja (single post) :
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
< kode tombol facebook like disini >
</b:if>

Catatan : Untuk memasang kode diatas pastinya harus loggin dulu ke blogger dan pilih rancangan >> edit HTML setelah itu di simpan.

6.9.10

Memasang Widget Translator

ingin pengunjung dari luar indonesia pasang widget translator dong....!!!
Langkah-langkahnya :

Masuk ke halaman dashboard, pilih layout (tata letak)

Klik Add Gadget (Tambah Gadget)

Pilih HTML/JavaScript.

Pada kotak Content (Konten) masukkan kode berikut:

Klik tombol Save.

Hasil dari widget translator dari Google seperti di bawah ini. Di dalamnya terdapat lebih dari 30 bahasa yang bisa anda pilih untuk menterjemahkan isi/teks/artikel yang ada dalam blog.

Membuat Navigasi Halaman ( Page View )

Page Navigation - adalah sebuah Widget yang digunakan pada Web ataupun Blog untuk memperlihatkan postingan atau artikel pada Webblog tersebut perhalaman.
Untuk membuat page navigation ikuti langkah-langkah berikut :
1. Masuk ke blogger dengan ID anda
2. Klik Menu Templates/Desain
3. Klik Add Widget Element/Add a gadget
4. Pilih Menu HTML/Java Script
5. Lalu copy Kode berikut dan Pastekan pada kotak HTML tersebut:

<style>
.showpageArea a {
text-decoration:underline;
}

.showpageNum a {
text-decoration:none;
border: 1px solid #bbb;
margin:0 3px;
padding:3px;
}

.showpageNum a:hover {
border: 1px solid #bbb;
background-color:#bbb;
}
.showpagePoint {
color:#fff;
text-decoration:none;
border: 1px solid #fff;
background: #000;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #bbb;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'Awal';
var endPageWord = 'Akhir';
var upPageWord ='Sebelumnya';
var downPageWord ='Selanjutnya';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://jakerobe.blogspot.com">Grab this Widget ~ Navigasi Halaman</a></div>

6. Setelah itu simpan
7.Scrool atau pindahkan (geser) Widget tersebut pada area dibawah posting (posting blog)
8.Save Template
9.Selesai

3.9.10

Cara Membuat Tab View

Secara garis besar tab view berfungsi untuk menampung banyaknya postingan atau artikel pada blog, jadi tab view ini sangat efisien digunakan karena tidak memerlukan tempat yang besar.
Tab view yang saya gunakan disini cukup sederhana, masih file mentah jadi bisa mengeditnya sesuai dengan keinginan, sehingga tampilannya akan menjadi lebih bagus dan itu tergantung dari kreasi.
Tab View merupakan sebuah Widget dimana kita dapat meletakkan link atau gambar atau apapun juga kedalamnya, yang tentu akan memakan Sidebar jika ditampilkan semuanya sampai kebawah, dengan Tab View ini kita dapat menghemat pemakaian Sidebar.

Berikut langkah-langkah untuk membuat tab view dengan mudah
1.Login ke blogger dengan ID anda
2.Lalu Klik Menu Templates
3.Klik Sub Menu Edit HTML
4.Pada Kotak Edit HTML cari Kode ]]></b:skin>
5.Lalu Copy Kode berikut dan Pastekan diatas kode ]]></b:skin>

/* tab model 2 ateonsoft.com */
div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}

6.Lalu letakkan kode berikut dibawah kode <head>

<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>

7.Save Template
8.Pergi ke halaman Element Halaman
9.Klik Add Widget Element
10.Pilih Menu HTML/Java Script
11.Lalu Copy kode berikut

<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page">
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div>
<div class="Page">
Disini letakkan kode untuk tab 2 anda
</div>
<div class="Page">
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div>
<div class="Page">
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

Selesai lihat hasilya berhasil gk???

30.8.10

Membuat Kotak Blogroll Marquee

Kotak Blogroll Marquee biasanya dipasang untuk link2 iklan, related link dsb.

Untuk membuat Blogroll marquee silahkan copy kode dibawah ini :
<MARQUEE align="center" direction="up" height="100" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 <br />
#link2 <br />
#link3 <br />
#link..<br />

</marquee>

Keterangan :
Kode "up" itu berati arah bergeraknya, anda bisa menggantinya dengan down, left, right
Jika ingin bergerak secara horizontal left atau right maka hilangkan kode <br />
Nilai "100" menunjukkan tinggi dari kotak blogroll. Semakin tinggi angkanya maka semakin tinggi pula ukuran kotak blogroll.
Scroolamount "2" adalah kecepatan link berjalan, semakin tinggi angkanya semakin cepat pergerakannya.

27.8.10

Entri Populer Blogger ( New )

Ada yang baru di Blogger!!!
Entri Populer adalah sebaris artikel yang sering dicari / dikunjungi, dan bagaimana cara memasangnya ikuti langkah-langkah berikut
1. Login ke blogger kemudian pilih menu "Rancangan".
2. Kemudian klik link "Add a gadget" dimana akan ditempatkan animasi flash.
3. Pilih "Entri Populer"

4. Simpan.

26.8.10

Membuat Menu Pull-Down di Sidebar

Cara Membuat Menu Pull-Down di Sidebar Blogger Blogspot dengan menambahkan gadged javascript/HTML
Ikuti cara sederhana sebagai berikut:

A. MENU PULL-DOWN DI BLOGGER BARU (TEMPLATE XML)

1. Login ke blogger.com
2. Klik Tata Letak / Desain => Tambah Gadget => Javascript / HTML => copy/paste kode di bawah ke kotak yang tersedia.

<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu>
<option value=0 selected>- Other Blogs -</option>
<option value="http://gratistutoriallengkap.blogspot.com/">Blogger indonesia</option>
<option value="http://gratistutoriallengkap.blogspot.com/">Blogger Tutorial</option>
<option value="http://gratistutoriallengkap.blogspot.com/">Blogger SEO</option>
<option value="http://gratistutoriallengkap.blogspot.com/">Blogger Template</option>
<option value="http://gratistutoriallengkap.blogspot.com/">Blogger Widged</option>
<option value="http://gratistutoriallengkap.blogspot.com/">Blogger Tips</option>
<option value="http://gratistutoriallengkap.blogspot.com/">Blogger Triks</option>
</select></form>

3. Klik Simpan. Selesai.

B. MENU PULL-DOWN DI BLOGGER LAMA (TEMPLATE CLASSIC)

1. Login ke blogger.com dg ID dan password Anda seperti biasa.
2. Klik judul blog Anda, dan klik TEMPLATE.
3. Di antara BEGIN SIDEBAR dan END SIDEBAR pasang kode berikut (copy dan paste):

<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu>
<option value=0 selected>- Other Blogs -</option>
<option value="http://gratistutoriallengkap.blogspot.com/">Blogger indonesia</option>
<option value="http://gratistutoriallengkap.blogspot.com/">Blogger Tutorial</option>
<option value="http://gratistutoriallengkap.blogspot.com/">Blogger SEO</option>
<option value="http://gratistutoriallengkap.blogspot.com/">Blogger Template</option>
<option value="http://gratistutoriallengkap.blogspot.com/">Blogger Widged</option>
<option value="http://gratistutoriallengkap.blogspot.com/">Blogger Tips</option>
<option value="http://gratistutoriallengkap.blogspot.com/">Blogger Triks</option>
</select></form>

Keterangan :
Kode Warna Hijau adalah Links yang dituju
Kode Warna Orange menunjukan Judul yang akan tampil

Memasang Widget Random Post di Blogger

Random Post Widget Untuk Blogger - widget ini bagus untuk menarik perhatian pembaca dan menaikkan jumlah inlink dalam blog.
Google crawl senang banget dengan inlink karena dia bisa loncat-loncat di dalam blog, hasilnya banyak page akan terindex oleh mbah Google ini.

Cara menambahkan random post di blogger :
1. Login ke blogger
2. pilih tata letak (desain)
3. Add gadget
4. kemudian pilih html/Java Script
5. Copy kode dibawah ini dan Paste (taruh) pada gadget

6. savedan lihat hasilnya ......

18.8.10

Membuat Form Order atau Contact Person di Blog

Form Order atau Contact Person merupakan hal yang cukup penting bagi sebuah blog, apalagi jika blog tersebut bergerak di bidang Bisnis Online dan penyedia pemasangan iklan.
Karena dengan adanya contact person, ini akan memudahkan pengunjung untuk melakukan order ataupun pemesanan terhadap produk yang disediakan suatu blog. Ini juga merupakan suatu kemudahan bagi pengunjung untuk berinteraksi dengan admin karena dengan adanya contact person ia tidak perlu lagi membuka email untuk melakukan order, karena pesan akan langsung terkirim ke pemilik blog, setelah kita mengisi form yang telah disediakan. Banyak penyedia layanan membuat contact person baik yang berbayar maupun yang gratisan, Salah satu penyedia contact person gratisan adalah emailmeform.com dan masih banyak lagi yang lainya.

Agar contact person / form order tampil pada blog, anda bisa mengikuti langkah mudah berikut ini:

Masuk di http://www.emailmeform.com/ kemudian lakukan registrasi dengan klik bacaan sign up ==> isi form yang disediakan
Setelah mengisi form register dengan benar ==> klik sign up
Buka email anda kemudian klik link verifikasi yang dikirim emailmeform untuk proses verifikasi
Pada bacaan "please click here to go into your Control Panel" klik kata "here" dan anda akan dibawa ke halaman control panel ==> klik "View the Form list" ==> klik "Create Form Wizard", selanjutnya anda akan menuju halaman berikut
Langsung saja klik Next kemudian pada step 2 isi nama, email, subject dan message pada form yang telah di sediakan kemudian klik Next ==> Next ==> Next ==> Next
Klik Finish

Sekarang proses registrasi emailmeform sudah selesai, agar contact person tampil pada blog, harus memasukkan code html yang diberikan, dengan cara log in ke acount blogger dengan username dan pasword anda.

14.8.10

Membuat Menu Multi Kolom

Membuat menu multi kolom disini maksudnya membuat lebih dari satu menu dalam satu kolom, ini berguna sekali untuk menghemat space blog anda yang sudah memiliki menu yang banyak

Langkah-langkah untuk membuat menu multi kolom1. Login ke blogger anda
2. Rancangan =>Edit HTML
3. Kemudian cari kode ]]></b:skin>
4. Masukan kode dibawah ini sebelum kode diatas

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E;
overflow: hidden;
background-color: #FF9900;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Keterangan :
- Angka yang berwarna merah-->lebar kotak menu utama
- Angka yang berwarna biru--> tinggi kotak menu utama
- Kode yang berwarna hijau--> warna border menu utama
- Kode yang berwarna ungu-->warna Font menu utama
- Kode yang berwarna abu-abu-->Warna background menu utama
- Kode yang berwarna kuning-->Warna border kotak utama
- Kode yang berwana orange-->warna background kotak utama

5. Silahkan masukkan kode dibawah ini sebelum kode </head>
<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6. Kemudian Save Tempalate

Kemudian ke menu Rancangan =>Page Elements =>pilih Add Gadget yang akan kamu tempatkan menu multi kolom ini =>HTML/Javascript

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Title menu 1</a>
<a>Title menu 2</a>
<a>Title menu 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Link 1 di menu 1 <br />
Link 2 di menu 1 <br />
Link 3 d1 menu 1 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 2 <br />
Link 2 di menu 2 <br />
Link 3 d1 menu 2 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 3 <br />
Link 2 di menu 3 <br />
Link 3 d1 menu 3 <br />
</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :
- kode yang berwarna hijau adalah title menu anda
- kode yang berwarna biru adalah lebar dan tinggi menu multi kolom
- kode yang berwarna merah adalah isi dari menu anda

Silahkan dicoba,,semoga berhasil!!!

12.8.10

Memasang Widget Music ( MP3 )

Memasang Widget Music ( MP3 ) tidak lah sulit alias mudah hanya dengan mengkopi kode HTMLnya ke blog

Langkah-langkahanya :
1. Login ke blogger
2. Pilih rancangan / tata letak
3. Tambah Widget baru
4. Pilih edit HTML/Javascript ( Copy kode di bawah ini ke blog )
<center><embed style="margin-top: 0px;" pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" autostart="true" displaysize="0" showstatusbar="1" type="application/x-mplayer2" src="http://ceriaradio.com:8000/" name="RAOCXplayer" allowscriptaccess="never" height="70" width="300"></embed></center>
<div style="text-align: center;">
<center><span style="font-size: xx-small;">Widget By: <a href="http://forantum.blogspot.com/">blogarozaq </a></span></div></center>
5. Selesai dah........ liat hasilnya

Widget By: blogarozaq

Memasang Widget TV Online

Nonton TV Online ini tidak akan di pungut biaya sepeserpun ( GRATIS ), jadi jangan pernah takut. Widget ini saya dapat dari temen Blogger saya, mau Memasang Widget TV Online di Website/Blog?

Langkah-langkahnya :

1. Login ke blogger
2. Pilih rancangan / tata letak
3. Tambah Widget baru
4. Pilih edit HTML/Javascript ( Copy kode di bawah ini ke blog )

<iframe frameborder="0" height="350" scrolling="no" src="http://zons.000a.biz/etc/tv/multitv01.html" width="425"></iframe>
<div class="linkwithin_text" id="linkwithin_text_0" style="border: 0pt none; font-weight: bold; margin: 0pt; padding: 20px 0pt 5px; text-align: left;">
</div><span style="font-size: xx-small;">Widget By: <a href="http://forantum.blogspot.com/">blogarozaq</a></span></div>

5. Selesai dah........ liat hasilnya

Widget By: blogarozaq

3.8.10

Pasang Kalender di Blog

Memasang sebuah kalender kita bisa memanfaatkan berbagai situs penyedia kalender gratisan. Situs seperti ini sangatlah banyak, agar tidak terlalu bingung mencarinya, saya berikan contoh satu saja yaitu http://free-blog-content.com.
Silahkan kunjungi situs tersebut ! kalender yang di sediakan sangat beragam.

Langkah-langkah memasang kalender di blog :
1. Login ke blogger
2. Pilih rancangan / tata letak
3. Tambah Widget baru
4. Pilih HTML/Javascript ( copy kode di bawah ini )

Hasilnya :

Khusus bagi yang muslim dan ingin kalendernya dalam bentuk kalender Hijriah, kalender ini di dapat dari http://mfr.jentayu.com. Bentuk kalendernya seperti ini :

Untuk mendapatkannya copy kode di bawah ini ke Widget

<script src="http://hijriah.jentayu.com/hijriah.php"> </script>

Pasang Jam di Blog Klick disini

1.8.10

Pasang Widget Yahoo Messenger

Yahoo Messenger atau sering disebut dengan YM merupakan fasilitas chatting yang sangat populer pada masa sekarang. Dengan adanya Yahoo Messenger, kita bisa mengirimkan pesan instan (lebih dikenal dengan IM).

Sedangakan Fungsi dari Widget YM di website/blog adalah agar pengunjung tau apakah admin sedang Online atau Offline. Jadi, pengunjung bisa berinteraksi langsung dengan admin jika ada pertanyaan atau hal2 lain yang ingin di ajukan.
Untuk memasang Widget Yahoo Messenger copy kode di bawah ini.

<a href="ymsgr:sendIM?ALAMAT YAHOO ANDA">
<img border="0" src="http://opi.yahoo.com/online?u=ALAMAT YAHOO ANDA&m=g&t=14"/></a>

Langkah-langkahnya :
1. Login ke blogger
2. Pilih rancangan / tata letak
3. Tambah Widget baru
4. Pilih edit HTML/Javascript ( Copy kode di atas jangan lupa rubah dulu alamat yahoonya )
5. Selesai dah........ liat hasilnya !!!

Hasilnya :

Hasil lainya :

Keterangan :
Untuk mendapatkan model yang lain ganti kode t=14 dengan dengan t=1 dan seterusnya......
Jangan lupa masukan alamat yahoo anda !