Paypal WishList on Facebook

Sekarang ini Facebook udah support Account Paypal dg membuat aplikasi yg bernama Paypal Wishlist,,

Dengan masuk ke aplikasi ini saja, kita langsung dapat $1 dan apabila kita mengajak teman kita gabung juga kita lagi-lagi dapat $1 untuk per orang yang kita ajak gabung. Potensi penghasilan kita bisa mencapai $100.

Syaratnya gampang aja, tentu pertama mesti punya akun facebook. Sudah pasti punyakan?? Kemudian punya akun Paypal. Belum punya akun paypal?? Gampang daftar aja di sini klik
https://www.paypal.com/id/mrb/pal=R27SEMY53P2PE

klo mau tau cara bikinnya bisa kunjungi Group Facebook BlackID Community,,
http://www.facebook.com/group.php?v=app_2373072738&ref=mf&gid=131305236057

ikuti langkah-langkah berikut;

* Setelah punya akun paypal dan facebook ikuti cara berikut ini.
* klik http://apps.facebook.com/paypalwishlist/?ppref=1502034587&ref=mf
* dan login ke facebook anda akan dapat bonus langsung $1, atau langsung klik tombol “Go To Application”
* Masukkan alamat email Paypal Anda melalui menu yang ada di sebelah kiri atas yang bertuliskan Enter Email Address.
* Buat wishlist Anda dengan menekan tombol Create Wishlist. Setelah selesai, Anda dapat men-share program Paypal Wishlist ini ke teman-teman Anda yang lain di Facebook.

Program ini berlangsung dari 16 Nov sampai 31 desember 2009 . maksimal yang bisa kita peroleh $100. pembayaran via paypal sekitar tgl 28 februari 2010.

Timelines
This Promotion begins at 00:00:01 Singapore Standard Time (“SST”) on November 16th, 2009 and ends at 23:59:59 SST on December 31st, 2009 ("Promotion Period").
How Prizes will be Awarded
You will be notified by PayPal no later than February 28th, 2010, via email or any other method as PayPal may from time to time determine, of how much you have earned.

oke share ini ke tmn2 fb nye,, utk gabung di Paypal Wishlist kami,,ikuti link berikut ini,, tinggal copy paste aje ko,,
http://apps.facebook.com/paypalwishlist/?ppref=1502034587&ref=mf

NB: sesuaikan link tsb dg your account paypal wishlist

Read More

Zoom Text Animation

Ternyata ga sulit loh membuat Animasi Zoom Text,,

klo blm tau apa itu Animasi Zoom Text??
silahkan visit ke http://blackid-community.blogspot.com

di bagian footer (bawah) ada Text yg jika mouse anda mengarah ke text tersebut akan merubahnya menjadi Animasi Zoom Text,,

atau liat langsung contoh nya di URL ini,,
" http:// h1 . ripway . com / adrianz1304 / ZoomText . html "
(sambung semua text tersebut mulai dr http -> html)



Yuk ikutin langkah2 nya:

1. untuk membuatnya silahkan copy paste Script code berikut ini,,

###################Start here#####################

< style type="text/css" >
body {margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;
font-size: 12px;
font-family: arial;
font-weight: normal;
color: #666;
}
.word {
cursor: pointer;
color: #666;
position: absolute;
z-index: 1;
}
.word_over {
cursor: pointer;
color: #FFF;
position: absolute;
z-index: 1;
}
.word_zoom {
position: absolute;
font-weight: bold;
z-index: 0;
}
< / style >

########################################

< script type="text/javascript" >

< / script >

#######################End Here#################

2. Letakkan Script tersebut pada Notepad,, lalu simpan dengan nama "ZoomText . html"

3.kemudian upload ke file hosting Anda masing2,, seperti Geocities.com / Ripway.com,,

4. gunakan script berikut ini,, copy-paste aja ky biasa,, ^_^



ganti "File Hosting Anda" dg URL link ZoomText . html Anda,,

5. letakkan di sidebar / posisi yg sesuai dg keinginan Anda di Website / Blog Anda,,

6.Selesai,,

Thanks to visit us,,
Please Leave your Comment,,

Regards,,
Author BlackID Community

http://blackid-community.blogspot.com

Read More

Let's Try Archieve Calendar Widget on Blogger

Archieve Calendar Widget

Source : http://anangku.blogspot.com

Bagi anda yang ingin menambahkan kalender sebagai penanda jejak posting-posting di blog anda atau sebagai arsip dari artikel-artikel anda, kini anda bisa menampilkannya di blog anda (prinsipnya mirip dengan plugin calendar di Wordpress). Caranya cukup simpel sekali. Ikuti deh langkah-langkah berikut ya, Ok?

Nah, berikut ini akan coba saya jelaskan bagaimana memulai langkah awal untuk menampilkan kalender di blog anda. Tips ini tentunya khusus berlaku untuk anda yang sudah menjadi New Blogger. Untuk yang masih Old Blogger segeralah beralih ke New Blogger

Pertama-tama anda harus login ke blog anda masing-masing, ya iya lah anda kan mau ngutak-atik blog anda to? Masa anda mau login ke blog saya, mau jadi hacker ya sampeyan?

Nah, langkah selanjutnya setelah anda berhasil login, klik menu Edit Layout (atau Template) pada Dashboard anda dan kemudian pilih Page Elements. Pastikan pada template anda sudah ada elemen Blog Archive. Nah, jika belum ada, segera tambahkan pada template anda.

Selanjutnya, klik Edit pada elemen Blog Archive tersebut, dan di sana akan anda temui 3 macam style atau bentuk arsip, yaitu Hierarchy, Flat List, dan Dropdown Menu. ANDA HARUS MEMILIH FLAT LIST. Kemudian lihat ke bawah, di sana ada Archive Frequency, ada 3 pilihan Monthly, Weekly, dan Daily. ANDA HARUS MEMILIH MONTHLY.

Kemudian klik menu Edit Layout (atau Template) pada Dashboard anda dan kemudian pilih menu Edit HTML dan selanjutnya berikanlah tanda centang pada kotak Expand Widget Templates. Dan kemudian cari kode HIERARCHY pada template anda tersebut.

Oke, setelah ketemu kode HIERARCHY tersebut, blok kode mulai dari HIERARCHY sampai </b:widget>. Di bawah ini adalah kode yang harus anda blok:

<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
.
.
.
dst... dan seterusnya...
.
.
.
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

Nah setelah di blok, DELETE atau HAPUS saja langsung kode tersebut, dan sebagai gantinya masukkan kode di bawah ini:

<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
<div id='blogger_calendar'>
<div id='anangcalendar'/><br/>
<table id='bcalendar'><caption id='bcaption'>

</caption>

<thead><tr><th abbr='Minggu' scope='col' title='Minggu'>M</th>
<th abbr='Senin' scope='col' title='Senin'>S</th>
<th abbr='Selasa' scope='col' title='Selasa'>S</th>
<th abbr='Rabu' scope='col' title='Rabu'>R</th>
<th abbr='Kamis' scope='col' title='Kamis'>K</th>
<th abbr='Jumat' scope='col' title='Jumat'>J</th>
<th abbr='Sabtu' scope='col' title='Sabtu'>S</th>

</tr></thead>

<tfoot><tr>
<td class='pad'/>
<td class='pad' colspan='3' id='next'/>
</tr></tfoot>

<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table><br/>
<div id='calLoadingStatus' style='display:none; text-align:center;'>
<img alt='loading' src=';http://anangku.googlepages.com/loading2.gif' style='vertical-align:middle'/> <b>Loading...</b>
</div>
<div id='calendarDisplay'/>

</div>

<script src='http://anangku.blogspot.com.googlepages.com/anangku.blogspot.com-bloggercalendar.js' type='text/javascript'/>

</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' expr:href='data:widget.actionUrl + "&amp;action=toggle" + "&amp;dir=close&amp;toggle=" + data:interval.toggleId + "&amp;toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + "&amp;action=toggle" + "&amp;dir=open&amp;toggle=" + data:interval.toggleId + "&amp;toggleopen=" + data:toggleopen'>
<span class='zippy'>► </span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
(<span class='post-count'><data:i.post-count/></span>)
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
</b:widget>

Untuk langkah terakhir, cukup anda memasukkan sebuah kode di bawah ini di bagian template anda persis sebelum tag </head>:

<link href='http://anangku.googlepages.com/anangku.blogspot.com-bloggercalendar.css' rel='stylesheet' type='text/css'/>

Ohya satu lagi, jangan lupa cek Time Zone anda apakah sudah betul di set pada [UTC+07.00] West Indonesian Time. Untuk nge-cek silahkan klik menu seting pada Dashboard anda, kemudian klik Setting, setelah itu klik Formatting. Nah, jika belum di set langsung aja diubah menjadi [UTC +07.00] West Indonesian Time. Penting!!!

Selamat mencoba!


Berikut ini ringkasan langkah-langkahnya:
1. Pastikan Arsip Artikel anda berbentuk Flat List dan Monthly
2. Ganti kode pada template (lihat penjelasan di atas)
3. Masukkan kode link CSS di head template.
4. Cek Time Zone anda, apa sudah benar memilih [UTC+07.00] West Indonesian Time
5. Selesai

Mudah bukan?

Hasilnya bisa di lihat di sidebar sebelah kanan.

Peringatan: Widget ini tidak nampak saat anda memilih untuk melihat terlebih dulu ("Preview") sebelum publish. Coba di "Publish" aja dulu baru kemudian dilihat perubahan yang terjadi, "View Blog".

This calendar is inspired by Phydeaux3. Merci beaucoup!

Read More

Smells Like Facebook : New Blogger Template Download

New Template for Blogger : SMELLS LIKE FACEBOOK

Details :

THEME NAME: Smells like Facebook
THEME URI: http://www.nazieb.com/456/smells-like-facebook
DESCRIPTION: The exact Facebook clone theme for Wordpress.
Based on Facebook profile page.
VERSION: 1.0.5
AUTHOR: Ainun Nazieb
AUTHOR URI: http://nazieb.com/

ScreenShot

Demo | Download

Smells Like Facebook themes finally released. After some fixes, the Wordpress Theme Directory team finally approved the theme. Like I said before, this theme is a clone from Facebook profile page. In the sidebar, it shows your gravatar and biographical info. On each post, the author’s gravatar is shown right before the post content. 2 first comments is also displayed for each post, and a link that said xx more comments will be shown below.

On the top navigation box, it displays the pages list. Feeds link is displayed right where ‘Settings’ link on Facebook is shown. The blog title & description is shown as the name & status on Facebook. The tabs is replaced with categories list, complete with “Browse more” box.

wah, akhirnya ketemu juga,, setelah mencari dengan susah payah,,

awalnya saya tidak sengaja melihat tampilan sebuah website yang sepertinya sebuah blog, tapi dengan tampilan yang begitu menarik,, bayangkan saja,, sebuah template yang benar-benar mirip seperti tampilan Facebook,, sumber nye saya lihat dari http://ridwanox.info
tapi yang bikin pada awalnye adalah nie dia -- > Ainun Nazieb (http://nazieb.com)
ga nyangka banget, ternyata template ini yang pada awalnya merupakan template wordpress,,
akhirnya ada blogger yang merilis nya sebagai template Blogger,,
langsung aje deh,, ga usah panjang x lebar dijelasinnye,,
nie dia template nye,, udah gitu,, sekarang bisa di download sama siapa aje,, Gratis,,,!!
buat sobat2 blogger yang kepingin tampilan blog nye dirubah dengan tampilan ini,,
silahkan bisa Anda download di sini,,,

Read More

Total Blog Posts n Comments widget

Statistic Blog Widget

Widget yg satu ini untuk menampilkan Statistic Blog Sobat Blogger,,
berdasarkan Total Posting yg Sobat buat dan Total Komentar yg masuk ke blog Sobat,,
langsung aja gmna cara nya,,
silahkan Sobat copas kode di bawah ini,,
kemudian letakkan di Page Element HTML/Javascript,,

Klik Preview >>

<script style="text/javascript">
function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }
</script><b>
<script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showpostcount"></script> articles have been written<br/><script src="/feeds/comments/summary?max-results=0&alt=json-in-script&callback=showpostcount"></script> comments entry

maka tampilan nya akan seperti ini >>

Total Blog Posts and Comments

articles have been written
comments entry

Sobat jg bisa langsung memasangnya di Blog Sobat,,
klik aja yg satu ini,,

<center><b><a href="http://genx4shared.blogspot.com">Total Blog Posts and Comments</a></b><br/><br/><a href="http://genx4shared.blogspot.com"><script style="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><b><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showpostcount"></script> articles have been written<br/><script src="/feeds/comments/summary?max-results=0&alt=json-in-script&callback=showpostcount"></script> comments entry</center></b></a>

atau jika Sobat ingin menambahkan script yg lain,,
seperti tampilan yg ini >>


Total Blog Posts and Comments

articles have been written
comments entry
Traffic Visitor

Since February, 13th 2009

Widget edited by Genx4Shared

Tinggal Sobat sesuaikan aja statistic seperti apa yg ingin Sobat tampilkan,,

oke,, Let's Try it Now,,

Keep Spirit n Happy Blogging,,

Read More

Let's try to Create Related Post by Categories

Related Post by Categories

Why Wordpress blogs are being preferred Over Blogger....?

One of the reason is Related posts comes automatically under each post for wordpress with buil on widget .This is now possible in Blogger with wonderful widget by hoctro with some editing to add functionality of categorizing the posts by labels.

Follow these steps to get implement this on your blogspot blog.

1. Go to your Layout Template >Edit HTML under your blogger / blogspot Dashboard.
   Click on the Download Full Template Link. save your downloaded template as a back up, just to prevent in case you failed on applying this hack.
   Then, tick the Expand Widget Templates.
2. Find this code below (U can use CTRL+F to find this)
   
   <data:post.body/>
   
3. Copy the code in HTML Below here
   --> related post by categories.txt
   
   
4. Paste right after the code #2
   Please be flexible. You can do experiment by put the inside a tag like this.
   Relates Stuff or Check this Out
   
   
5. Save your template. refresh your blog, and Done.

That’s all. Enjoy!

Like if you have some post1 will labels News, Humor and America, another post2 will show that post in related posts at the end of the post footer followed by these labels respectivevly.

As we know Google highly ranks the websites/blogs with low bounce rate and the method is considered highly effective for SEO. For Eg. if your visitors visits one of your page and leaves the blog instantly you bounce rate will be 100% for that page Bounce Rate = Single Page Access/ Entries.

An entrance webpage with a low bounce rate means that the page effectively causes visitors to view more pages and continue on deeper into the blog increasing your pageviews hence possibly increase in the Alexa rankings. This is engaging for visitors and the best part is the associated posts are showed agreeing to the deafult layout and css styles that have already been predefined even for a custom blogger template.

Though the list of related links goes on to 24 at max( if available ) can be a bit irritating as your comment box seems to hide, but this problem can also be solved using Feedflare of Feedburner that adds a link after the post named "add comment". When user clicks on this link he is directed to the comment form box. Also this is good technique if you invariably use lot of lables for any post.

Thanks to visit,,

^_^ Happy Blogging ^_^

Read More

Let's Try to add PageEar - Free Peel Away Ad

PageEar-Free Peel Away Ad

PagePeel atau biasa disebut juga dengan istilah PageEar, Magic Corner, PeelAd, peel away ad merupakan salah satu cara lain untuk menayangkan iklan dengan gaya (style) yang berbeda. Tidak seperti tampilan iklan banner pada umumnya, jika anda mengarahkan mouse pada area PagePeel ini, maka akan terlihat halaman menggulung layaknya anda membuka selembar kertas dan menemukan halaman lain dilembar sebaliknya. Tujuan utama memasang PagePeel tentu saja ingin mendapatkan perhatian lebih besar dari pengunjung untuk mengkliknya.

This article I've got from here and here,, I just want to try it on my blog.

Here I would like to offer PagePeel free of charge and without external advertisings. Only condition is that you leave copyright notice.

If you like free page peel script, a backlink would be nice.

Feature:

• NEW! Pageear is scalable now. You can change the peel size 100×100 and 500×500 Pixel by your own.
• Plays MP3-Files on startup, open and close of Pagepeel.
• Possibility to leave peel open and wait for userklick to close. Close text is editable.
• Place it on the left or right upper corner
• Open and close automaticly after X seconds
• Speed of the small pageear could be changed
• Flashcheck (Adobe© Flash Detection)
• Reflecting image on corner
• Color of the pagecorner
• Link target on external side or own (self, new)
• Downwardcompatibly up to Flashversion 6
• Runs on nearly all Browser (FireFox, InternetExplorer, Opera, Safari, etc.)

Tutorial Cara Pasang (Installasi):

1. Download dulu file PageEar v1.4
2. Kemudian Extrack file pageear_v14.zip di folder anda.
3. Silahkan Edit File pageear.js (menggunakan notepad misalkan)
   
   
   Note: dalam file pageear.js inilah semua konfigurasi yang anda perlukan. Agar anda tidak pusing tujuh keliling, saya sertakan saja contoh dari beberapa kemungkinan yang perlu anda edit. Lihat code yang diedit dengan warna merah.
   
   
   var pagearSmallImg = 'http://alamat-server-anda.com/pageear_s.jpg';
   
   var pagearSmallSwf = 'http://alamat-server-anda.com/pageear_s.swf';
   
   var pagearBigImg = 'http://alamat-server-anda.com/pageear_b.jpg';
   
   var pagearBigSwf = 'http://alamat-server-anda.com/pageear_b.swf';
   
   var jumpTo = 'http://alamatbloganda.com/'
   
   
   
   Sebenarnya masih banyak configurasi yang lain, selebihnya dibaca saja ya pada manualnya.
   
   
4. Upload semua file yang ada dalam folder pageear_v14/pageear/ ke server milik anda (pages.google.com misalkan)
5. Langkah akhir lakukan pemanggilan javascript, atau dari pada puyeng langsung copy paste aja kode dibawah ini. jangan lupa mengganti alamat url dibawah ditandai dengan warna merah dibawah.
   
   <script language='javascript' src='http://alamat-server-anda.com/AC_OETags.js'/>
   
   <script src='http://alamat-server-anda.com/pageear.js' type='text/javascript'/>
   
   <script type='text/javascript'>
   writeObjects();
   </script>
   

Untuk pengguna blogger silahkan meletakan script diatas di bawah kode <title><data:blog.pageTitle/></title> pada halaman Edit HTML.

Let's try it Now,,,
^^ Happy Blogging ^^

Read More

Let's Try to Create Slide Show Tab View Widget

Slide Show Tab View Widget

Have you ever visited http://kompas.com? One of the most famous newspaper website in Indonesia...
At the left of the site, you can see a tab menu which is usually called “Tab View”.
Why is it called Tab Menu? Because when the tab is clicked, it will move the menu content (wanna prove, just click the tab). However, it is a little different from the normal tab menu. The tab menu usually shows the content of the menu in turn or what we usually call “Slide Show”. It takes a conclusion that menu has 2 functions; as a “Tab View” and “Slide Show”.

I was interested in that tab menu, tried to apply it in blogger template and it works. To see the sample of Slide Show Tab View Widget, please visit http://genx4shared.blogspot.com and pay attention to the left side of the top, there you can see the widget that is similar to the widget in kompas.com.

If you are interested in making Slide Show Tab View Widget, please follow the steps below.

# Step 1

1. Log in into blogger with your ID
2. Click Layout
3. Click Edit HTML tab
4. Click Download Full template. Please back up your template first
5. Copy the code below, then paste it above ]]></b:skin>

   .indentmenu{
   font: bold 11px Arial;
   width: 100%; /*leave this value as is in most cases*/ 
   } 
   .indentmenu ul{
   margin: 2px;
   padding: 0;
   float: left;
   /* width: 80%; width of menu*/
   background: transparent;
   } 
   .indentmenu ul li{
   display: inline;
   } 
   .indentmenu ul li a{
   float: left;
   margin: 2px;
   color: #000; /*text color*/
   padding: 5px 11px;
   text-decoration: none;
   border: 1px solid #ccc;
   } 
   .indentmenu ul li a:hover{
   background:#ddd;
   } 
   .indentmenu ul li a:visited{
   color: white;
   } 
   .indentmenu ul li a.selected{
   color: white !important;
   padding-top: 6px; /*shift text down 1px*/
   padding-bottom: 4px;
   border: 1px solid #000000;
   background:#000000;
   } 
   .tabcontentstyle{ /*style of tab content container*/
   border: 1px solid gray;
   width: 450px;
   margin-bottom: 1em;
   padding: 10px;
   } 
   .tabcontent{
   display:none;
   } 
   @media print {
   .tabcontent {
   display:block !important;
   }
   }

   
   
6. Before continuing, please download this script , copy-paste it right above </head>
7. Click SAVE TEMPLATE
   

The 1^st Step is done.

Let’s continue to the 2^nd Step

# Step 2

1. Click Page Element tab
   
2. Click Add Gadget
   
   
   

3. Choose HTML/JavaScript.
   
   
   

4. Copy-paste the code in available column:
   
   

   <div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">
        
   <div id="pettabs" class="indentmenu">
      
   <ul>
   
   
   <li><a href="#" class="selected" rel="tab1">1</a></li>
   
   <li><a href="#" rel="tab2">2</a></li>
   
   
   <li><a href="#" rel="tab3">3</a></li>
    
   <li><a href="#" rel="tab4">4</a></li> 
       
   </ul>
   
     
   <br style="clear: left"/>
   
   </div> 
       
   <div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em"> 
       
   <div id="tab1" class="tabcontent">
   
     
   <a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">
    
   <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="obamabush" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtartls5gOnsrHzXUvk3ekPaZKLW8CLub_klwLYyZzO3vAW2qK94aK-V18x6SB0t2eWxrRebQ_UZlXGXdndJNkxzptbXNvbWTu8fX25tFN36W6f23CU43o-7qoG6n67YxAZ6rLs6723Rk/?imgmax=800" height="152" title="obamabush"/></a> 
       
   <p><h3><a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">Obama Will Change Busf Policy</a></h3></p>
   
   
   U.S. President Barack Obama will change several numbers of controversial policies by President George W. Bush, including the restriction of the parent embryo cell research [...]
   
   </div> 
       
   <div id="tab2" class="tabcontent">
     
   <a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">
   
   <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhxcfQdWdzacri8DRM4AqGVByo_pMNXKvgIX7keq501ziznvy1LJQdbpqOLYBLkpELOuSd4VjofzY2OWERZxzUjpHvInC0nSAA0Iuj-V_Ayrb8Cq-Ca1AsoN46pzf1vpxlUyXzdSPEu5o/?imgmax=800" height="152" title="beyone"/></a>
   
    
   <p><h3><a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">Beyone Will Never Sell Her Wedding Photo</a></h3></p> 
        
   Beyonce said, she will never consider to sells her wedding photo with Jay-Z to a celebrity magazine that offering a large amount of money as rewards, even she wonder with the amount of money that offered to her [...]
     
   </div>
      
   <div id="tab3" class="tabcontent">
   
     
   <a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">
    
   <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIy-52CW6k91euibuiDMtLqaxsetI84sJJbgLoqDkmyxpvzuD9VDW40YGa9nJ0XO3bCVfyv97bUewsWozu6o3MiDm11n74uQadEkLSNrxoBn0aKLydss4dz7ZtOFBZKpyDsNbnCNUABck/?imgmax=800" height="152" title="Guns N 'Roses"/></a>
   
   <p><h3><a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">Guns N 'Roses Will Back</a></h3></p>      
   After 15 years not releasing album, the group rock Guns N ' Roses will launch a new album in the United States on 23 November. The band's latest album is "The Spaghetti Incident", released in 1993 [...]
     
   </div> 
       
   <div id="tab4" class="tabcontent">   
   <a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">
   
   
   <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJx6n4qredHABzpQ4_R5Ix9sg1SoLr2ER3rOiIFn2GIV0UH6hlesIgw-rG5vEM8nGMqWKP_uGuI78lnaAu7vaGRLGRXjzeiGDa-3WSILjhNnUT146GYuAwU-CuAF4ZPoM_QMyQya3Edo/?imgmax=800" height="152" title="ipod"/></a>
   
   
   <p><h3><a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">Ipod Can Make Your ear Buzz</a></h3></p> 
        
   Music is one way to wake the spirit, to create happy life, but what happens if the music makes the ears buzz? of course, not the music that makes the ear 'buzzy',[...]
     
   </div>
   </div> 
   <script type="text/javascript">      
   var mypets=new ddtabcontent("pettabs")    
   mypets.setpersist(true)    
   mypets.setselectedClassTarget("link")    
   mypets.init(2000)       
   </script>

   
   
5. Click SAVE TEMPLATE button.
   
6. Finish and view you blog to see the result.
   

The code above is not absolute as I had written. You can modify it as your interest or suitable with your template.

Below is additional information that will ease you in modifying this code.

In the 1^st step, there is a row of CSS code, that code can be modified so that it produces a beautiful row tab.

Take a look at the code below

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">

<div id="pettabs" class="indentmenu">

<ul>

<li><a href="#" class="selected" rel="tab1">1</a></li>


<li><a href="#" rel="tab2">2</a></li>


<li><a href="#" rel="tab3">3</a></li>


<li><a href="#" rel="tab4">4</a></li>

</ul>

<br style="clear: left"/>


</div>

This code is a tab row with the tab row such as1, 2, 3, and 4. You can change with your favorite ones, such Recent Comments, Recent Post, Shoutbox or anything you want. To arrange the height of your widget, change height:350px with the value that you want, example; height:400px.

Please, Pay attention the code below too.

<div style="width: 240px; text-align: justify; padding: 5px; margin-bottom: 1em">

The code above is used to arrange the menu content and it can be changed as you want to, such as;

width:240px : it is used to arrange the width, change it with the value that you want, example; width:300px.

text-align:justify : it is used to arrange the writing, change it with the value that you want,

Example; text-align:left, text-align:right.

Also, Pay attention the code below too.

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")

mypets.setpersist(true)

mypets.setselectedClassTarget("link")

mypets.init( 2000)

</script>

To arrange the moving of image from one tab to other tab, change 2000 with the value that you want, example; 2100.

Code in “Slide Show Tab View Widget” contains with the Articles. Please change it with your own articles.

Original Script by: dynamic drive.
Modified by: Genx4Shared

Let's try it now,,,

Happy Blogging

Read More

Contact Me

Contact Me Form

Hello Readers!
If you would like to ask some questions, say something to me or share about everything? Please contact me through the contact form below. I will respond it as soon as possible. Thanks

Read More

Let's Try to Create Popular Post Widget (Posting Populer)

Popular Post (Posting Terpopuler)

Nah, posting yang satu ini hampir sama seperti 3 posting sebelumnya, yaitu tentang :

• Recent Post Widget (Posting Terbaru),,
  
• Recent Comment Widget (Komentar Terbaru),,
• Random Post Widget (Posting Acak),,
  

Posting kali ini adalah tentang

Popular Post (Posting Terpopuler),,

Sama seperti sebelumnya,, sobat blogger pasti telah mengetahui hal ini sebelumnya,,,
Namun,,seperti biasa,,tidak ada salahnya Anda mencoba cara yang satu ini,,,
Anda tidak perlu lagi "Copy-Paste" script seperti sebelumnya,,,

Anda tinggal pilih,, tekan tombol yang satu ini,,,

You can also add this widget with just press the button below to add a Popular Post widget on your blog.

<script type="text/javascript"><br />function pipeCallback(obj) {<br />document.write('<ul style="text-transform: capitalize;">');<br />var i;<br />for (i = 0; i < href = "'" item =" ">" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";<br />document.write(item);<br />}<br />document.write('</ul>');<br />}<br /></script><br /><script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ff855e4f4d4a10fde1c2eb32074f99cd&url=http%3A%2F%2Fnamablog.blogspot.com&num=10" type="text/javascript"></script><span style="font-size: 80%">Widget edited by <a href="http://genx4shared.blogspot.com">Genx4Shared</a></span>

Atau pilih cara yang satu ini,,,

Caranya sangat mudah koq,, Anda hanya tinggal mengisi kolom di bawah ini dan ikuti langkah-langkahnya:

Nah coba lihat blog Anda sekarang, udah kelihatan kan "Popular Post"-nya...

Widget ini disusun berdasarkan Popular Posts (Most Commented) Widget for Blogger Blogs yang dibuat oleh Amanda dengan menggunakan bantuan aplikasi online Yahoo Pipes untuk memproses 100 komentar terakhir di blog anda dan akan ditampilkan menjadi posting dengan komentar terbanyak pada widget ini.

Widget ini bisa dijalankan diMozilla FireFox, Opera, dan IE...

Inspirasi : Mas Anang
Widget Edited by : Genx4Shared

Let's try it now,,

^^Happy Blogging^^

Read More

Let's Try to Create Random Post Widget (Posting Acak)

Random Post (Posting Acak)

Nah, posting yang satu ini hampir sama seperti 2 posting sebelumnya, yaitu tentang Recent Post Widget dan Recent Comment Widget,,

Posting kali ini adalah tentang Random Post (Posting Acak),,

Sama seperti sebelumnya,, sobat blogger pasti telah mengetahui hal ini sebelumnya,,,
Namun,,seperti biasa,,tidak ada salahnya Anda mencoba cara yang satu ini,,,
Anda tidak perlu lagi "Copy-Paste" script seperti sebelumnya,,,

Anda tinggal pilih,, tekan tombol yang satu ini,,,

You can also add this widget with just press the button below to add a Random Post widget on your blog.

<script type="text/javascript"><br />function pipeCallback(obj) {<br /> document.write('<ul style="text-transform: capitalize;">');<br /> var i;<br /> for (i = 0; i < href = "'" item =" ">" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";<br /> document.write(item);<br /> }<br /> document.write('</ul>');<br /> }<br /> </script><br /><script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=022620be5e6f6a66359d63edb5055e66&url=http%3A%2F%2Fgenx4shared.blogspot.com&num=10" type="text/javascript"></script><br />

Atau pilih cara yang satu ini,,,

Caranya sangat mudah koq,, Anda hanya tinggal mengisi kolom di bawah ini dan ikuti langkah-langkahnya:

Nah coba lihat blog Anda sekarang, udah kelihatan kan "Random Post"-nya...

Inspirasi : Mas Anang

Read More