Cara membuat Button Download di Blog

He he hei dah lama ga posting nih, kangen juga pengen posting kira-kira poasting apa yah!! hmm saya tahu gimana kalau cara membuat tombol atau button download atau demo anda jadi lebih gaya dan keren.

Gi mana?? mau oke let's go..

Nah trik dan tips berikut sangat cocok di terapkan untuk blog - blogspot anda yang berhubungan dengan download, baik template, sofeware, lagu, film atau apaupun yang berhubungan langsung dengan download mendownload, supaya penampilan blog anda jadi gi mana gitu (he he he).

Untuk sample button yang sudah jadi anda bisa melihat di :http://kontak07.blogspot.com/2012/02/sample-tombol-button-css.html

Seep cukup sederhana sebenarnya kita hanya memanfaatkan html sederhana dan pengaturan css yang sederhana pula.

caranya :
Login ke dasbor blogger kamu
KLIK template --- Edit Html --- Lanjutkan

cari kode : ]]></b:skin>

dan copy paste kode style css di bawah ini tepat di atas kode ]]></b:skin>

/* download button */
.download { -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7; -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7; box-shadow:inset 0px 1px 0px 0px #bbdaf7; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ); background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5'); background-color:#79bbff; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #84bbf3; display:inline-block; color:#ffffff; font-family:arial; font-size:16px; font-weight:bold; padding:11px 30px; text-decoration:none; text-shadow:1px 1px 0px #528ecc; }

.download:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) ); background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff'); background-color:#378de5; }

.download:active { position:relative; top:1px; }

/* demo button */
.demo { -moz-box-shadow:inset 0px 1px 0px 0px #fce2c1; -webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1; box-shadow:inset 0px 1px 0px 0px #fce2c1; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) ); background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25'); background-color:#ffc477; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #eeb44f; display:inline-block; color:#ffffff; font-family:arial; font-size:16px; font-weight:bold; padding:11px 50px; text-decoration:none; text-shadow:1px 1px 0px #cc9f52; }

.demo:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) ); background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477'); background-color:#fb9e25; }

.demo:active { position:relative; top:1px; }

Sudah kemudian save / simpan template anda.

Sekarang buat postingan baru. Perhatikan pada tab HTML (ingat bukan Tab Compose yap! ingat..ingat he he he!!)

Buat link dengan pengaturan class css dengan memanggil fungsi link dan css yang telah kita buat sebelumnya :


<a href="#" class="demo">demo</a>
<a href="#" class="download">download</a>

Ganti # dengan link dari demo atau link download tujuan anda, beres dan terbitkan entri.

Kamu juga bisa membuat sendiri tombol atau button sesuai dengan style anda sendiri silahkan gunakan css button generator untuk mempermudah. Silahkan ngacir aja langsung ke www.cssbuttongenerator.com

Selamat mencoba

Menambah Jumlah Like Facebook Fan Page Dengan Cepat

Menambah Jumlah Like Facebook Fan Page Dengan Cepat –  Jika sebelumnya saya sudah pernah membuat postingan tentang Klaten Blogger Community dan Elektroforisis Koloid, namun pada kesempatan saya akan membagikan sebuah tips trik menarik "Menambah Jumlah Like Fan Page". Mendapatkan jumlah like facebook yang banyak dapat menjadi suatu kebanggaan tersendiri bagi pemilik facebook fan page. Dengan banyak jumlah yang nge-like, maka artinya akan banyak orang yang melihat status ataupun postingan fan page. Hal tersebut sudah tentu sangat bagus untuk promosi karena setiap  update status di facebook fan page maka akan muncul di facebook orang yang nge-like.

Cara Menambah Jumlah Like Facebook Fan Page Dengan Cepat di sini bukan cara curang dengan menggnakan plugin likejacking, namun Menambah Like Fan Page Dengan Cepat yaitu dengan memanfaatkan sebuah situs.

Cara Menambah Like Fan Page Dengan Cepat :

1. Silahkan langsung menuju link situs youlikehits

2. Lakukan pendaftaran dan verifikasi akun melalui e-mail, yaitu dengan cara mengisi form sign-up di kolom sebelah kanan monitor, isi mulai dari username, e-mail, password dan mnegsikan captcha, kemudian klik sign-up.

3. Buka email untuk melakukan aktivasi....

4. Setelah itu silahkan log-in dengan memasukkan username dan password yang telah didaftarkan sebelumnya.
5. Masuk ke pengaturan facebook, tambahkan alamat URL facebook fan page yang akan di-like banyak orang. Pilih jumlah poin untuk me-like, pilih aja 2 biar hemat
6. Tunggu dan biarkan saja beberapa saat, 50 poin Anda pasti habis di tukar dengan like facebook fan page. Cek ke facebook fan page Anda pasti like-nya bertambah. 
7. Supaya like bertambah terus, maka kita harus memiliki poin. Cara mendapatkan poin bisa beli atau bisa juga kita ikut program me-like fan page orang lain. Setiap kita like, maka akan dapat poin sesuai dengan jumlah poin yang tertera di setiap facebook fan page. Kurang lebihnya seperti itu !!!


Demikian artikel singkat mengenai Menambah Jumlah Like Facebook Fan Page Dengan Cepat, semoga dapat membantu dan bermanfaaat untuk semuanya. Always Try!!! Good Luck....

Memasukan Url or Alamat Blog Ke Google

Memasukan Url or Alamat Blog Ke Google.

Daftarkan blog kita ke google melalui situs sini. Google add Url.
Url : isi dengan alamat blog anda
Commnets : masukan keterangan tentang blog anda. >> add url
http://untukberbagi-x3x.blogspot.com/2012/07/memasukan-url-or-alamat-blog-ke-google.html

Verifikasi dan Submit ke Webmaster Tools.

Langkah selanjut memperifikasi dan men submit sitemap blog anda ke webmaster tool.
1. buka google webmaster tools kemudian daftar mengunakan gmail account yang kita miliki.
2. klik tab Add a Site
http://untukberbagi-x3x.blogspot.com/2012/07/memasukan-url-or-alamat-blog-ke-google.html
3. Enter the URL of a site you'd like to manage. masukan alamat blog anda - tampa di awali dengan http:// atau www. misal >> rizjournal.blogspot.com.
klik Continue.
 
4. Kemudian pada halaman Verification status, ( untuk blogspot biarkan pemilihan pada Meta Tag . red ). Salin / copy semua tulisan <meta name="google-site-verification" dst.. dgn cara pilih klik kanan mouse copy.

http://untukberbagi-x3x.blogspot.com/2012/07/memasukan-url-or-alamat-blog-ke-google.html

5. Login / masuk pada blog anda ( blogger.com ), kemudian dalam halaman Template, pilih >> tab Edit Html. masukan dan simpan meta name verifikasi yang tadi kita copy setelah tag :  <title><data:blog.pageTitle/></title>



Setelah beres klik tombol >> Save Template / Simpan Perubahan.


6. Kembali ke halaman google webmaster tool. kemudian klik tombol Verify, untuk mengkonfirmasi pendaftaran.

7.  Jika berhasil ter Verifikasi maka anda akan masuk pada halaman Dasboard .

Submit a Sitemap

Setelah blog kita terverifikasi, langkah selanjut mensubmit sitemap / peta situs blog kita. Untuk blogspot sitemapnya tidak serumit blog lain.
Untuk mensubmit sebuah sitemap dalam halaman dasboard cari tulisan Sitemaps kemudian klik link tulisan Sumbit a Sitemap.

  
Setelah itu pada halaman sitemaps klik tombol Add a site, dan masukan kode ini pada kotak isian >> Submit Sitemap

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

Keyword dan Keterangan Blog

Keyword atau kata kunci merupakan bagian dari penjelasan di atas. Walaupun menurut sebagian master seo. google dan search engine lainnya sudah tidak mendata lagi informasi dengan bantuan keyword yang ada pada sebuah situs web/blog.
Dan saya pun tidak akan menjelaskan panjang lebar tentang keyword ini, karena begitu luas dn dinamisnya – yang tidak mungkin saya bisa jabarkan dalam satu artikel. Namun untuk panduan dasar bisa anda donwload E-book “ Search Engine Optimization – Starter Guide pdf “.
Sedangkan untuk menyimpan atau menambah meta keyword dan meta description, tambahkan saja kode berikut ini, di bawah kode verifikasi di atas.

<meta content='ISI DESCRIPTION ' name='description'/>
<meta content='ISI KEYWORDS ' name='keywords'/>
<meta content='ISI AUTHOR NAME' name='author'/>
<meta content='index,follow' name='robots'/> 

Cara Membuat Efek Daun Berjatuhan Di Blog

Cara Membuat Efek Daun Berjatuhan Di Blog – Efek daun berjatuhan di blog sepertinya juga banyak diminati oleh sobat blogger, dan menurut saya efek daun berjatuhan ini loadingnya lebih ringan dan cepat ketimbang efekbintang bertaburan yang saya posting sebelum ini. Trik membuat efek daun berjatuhan ini juga masih menggunakan javascript, cara membuatnya simak lebih lanjut dibawah ini.

Cara Membuat Efek Daun Berjatuhan :

1.       Seperti biasa login dulu ke dashboard blogger anda.

2.       Pilih Rancangan > Edit HTML, centang Expand widget template.

3.       Cari kode </head>  pada template dengan menggunakan Ctrl+F.

4.       Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head> .

<script src='http://arti.master.irhamna.googlepages.com/daun.js'/>

5.       Save / simpan template anda dan lihat hasilnya muantaaap bro !!

Nah itu tadi langkah-langkah bagaimana cara membuat efek daun berjatuhan di blog, cukup mudah bukan ? Jangan lupa daun-daunnya kalo sudah kebanyakan yang jatuh sambil di sapu ya he he…

NB :

Kalau di blog sobat sudah menggunakan efek bintang pada kursor, video slide, pemutar music mp3 online atau penggunaan script animasi yang lainnya, sebaiknya jangan tambahkan lagi dengan efek daun berjatuhan ini. Karena akan memberatkan loading blog sobat alias jadi lemot. Jadi pertimbangkan baik-baik sebelum menggunakan sebuah efek javascript. Trims.

Cara membuat efek bintang bertaburan (sprinkle)

Cara Membuat Efek Bintang ( Sprinkle ) Pada Kursor – Pastinya sobat blogger sudah sering melihat tampilan kursor di blog lain dengan efek bintang yang bertaburan (sprinkle) dan berwarna-warni bukan ? Memang efek bintang bertaburan (sprinkle) pada kursor bisa mempercantik penampilan blog sobat, namun disisi lain juga punya kelemahan yaitu akan memperlambat loading blog akibat efek penggunaan javascript. Namun tidak ada salahnya juga sih kalo memang sobat pengen tampilan blognya keren, silahkan saja untuk mencoba membuat efek bintang bertaburan (sprinkle) ini di blognya.

Cara membuat efek bintang bertaburan pada kursorcukup mudah, sobat blogger tinggal ikuti langkah-langkah seperti dibawah ini :

1.       Login ke dashboard blogger sobat.

2.       Pilih Rancangan > Elemen Halaman > Add Gadget (HTML/JavaScript).

3.       Copy dan paste script dibawah ini pada gadget baru tadi.

<script> // JavaScript Document<script type='text/javascript'> // <![CDATA[ var colour="red"; var sparkles=65; var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var tiny=new Array(); var star=new Array(); var starv=new Array(); var starx=new Array(); var stary=new Array(); var tinyx=new Array(); var tinyy=new Array(); var tinyv=new Array(); window.onload=function() { if (document.getElementById) { var i, rats, rlef, rdow; for (var i=0; i<sparkles; i++) { var rats=createDiv(3, 3); rats.style.visibility="hidden"; document.body.appendChild(tiny[i]=rats); starv[i]=0; tinyv[i]=0; var rats=createDiv(5, 5); rats.style.backgroundColor="transparent"; rats.style.visibility="hidden"; var rlef=createDiv(1, 5); var rdow=createDiv(5, 1); rats.appendChild(rlef); rats.appendChild(rdow); rlef.style.top="2px"; rlef.style.left="0px"; rdow.style.top="0px"; rdow.style.left="2px"; document.body.appendChild(star[i]=rats); } set_width(); sparkle(); }} function sparkle() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<sparkles; c++) if (!starv[c]) { star[c].style.left=(starx[c]=x)+"px"; star[c].style.top=(stary[c]=y)+"px"; star[c].style.clip="rect(0px, 5px, 5px, 0px)"; star[c].style.visibility="visible"; starv[c]=50; break; } } for (c=0; c<sparkles; c++) { if (starv[c]) update_star(c); if (tinyv[c]) update_tiny(c); } setTimeout("sparkle()", 40); } function update_star(i) { if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; if (starv[i]) { stary[i]+=1+Math.random()*3; if (stary[i]<shigh+sdown) { star[i].style.top=stary[i]+"px"; starx[i]+=(i%5-2)/5; star[i].style.left=starx[i]+"px"; } else { star[i].style.visibility="hidden"; starv[i]=0; return; } } else { tinyv[i]=50; tiny[i].style.top=(tinyy[i]=stary[i])+"px"; tiny[i].style.left=(tinyx[i]=starx[i])+"px"; tiny[i].style.width="2px"; tiny[i].style.height="2px"; star[i].style.visibility="hidden"; tiny[i].style.visibility="visible" } } function update_tiny(i) { if (--tinyv[i]==25) { tiny[i].style.width="1px"; tiny[i].style.height="1px"; } if (tinyv[i]) { tinyy[i]+=1+Math.random()*3; if (tinyy[i]<shigh+sdown) { tiny[i].style.top=tinyy[i]+"px"; tinyx[i]+=(i%5-2)/5; tiny[i].style.left=tinyx[i]+"px"; } else { tiny[i].style.visibility="hidden"; tinyv[i]=0; return; } } else tiny[i].style.visibility="hidden"; } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sdown; x=(e)?e.pageX:event.x+sleft; } function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height+"px"; div.style.width=width+"px"; div.style.overflow="hidden"; div.style.backgroundColor=colour; return (div); } // ]]> </script>

4.       Simpan dan lihat hasilnya.

NB : Silahkan ganti warna “red” dengan warna lainnya green, blue, yellow atau warna lain sesuka anda.

Efek bintang bertaburan pada kursor ini akan terlihat jika loading telah selesai. Kalo loadingnya jadi agak lambat ya ditunggu aja yang sabar ya. Selamat mencoba sobat.

Cara Membuat Floating Share Button

Cara Membuat Floating Share Button  - Membuat share artikel melayang (floating button) ini merupakan kelanjutan dari posting saya sebelumnya Cara Memasang Button Share Artikel di Blog. Bedanya kalau tombol share melayang ini hanya untuk berbagi artikel ke 4 layanan social bookmark saja yaitu share artikel ke Facebook, Twitter, Google Buzz dan Google Plus One ( +1 ). Yang penting bisa berbagi artikel postingan lah.

Baik sobat langsung saja nih cara memasang share button melayang di blog :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script dibawah ini dan paste kedalam gadget baru tadi.

 

<style>

#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>

<div id="pageshare" title="Get this code from rayhanzhampiet.blogspot.com">

<div class="sbutton" id="fb">

<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">

</script></div>

<div class="sbutton" id="rt">

<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">

</script></div>

<div class="sbutton" id="gb">

<a class="google-buzz-button" data-button-style="normal-count" href="http://www.google.com/buzz/post" title="post on google buzz">

<script src="http://www.google.com/buzz/api/button.js" type="text/javascript">

</script>

</a></div>

<div class="sbutton" id="gplusone">

<script src="http://apis.google.com/js/plusone.js" type="text/javascript">

</script>

<g:plusone size="tall"></g:plusone></div>

</div>

4.       Save / Simpan.

Update 5 Maret 2012 :

Cara pemasangan widget pada template:

1. Ganti/edit kode #pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; dengan kode ini #pageshare {display:scroll;position:fixed;top:165px;left:30px;
2. Login ke dashboard blogger, pilih Rancangan > Edit HTML
3. Letakkan script widget tepat diatas kode   pada template.
4. Save / Simpan.

Cukup singkat bukan ternyata cara pasang share artikel melayang di blogspot ini ? Selamat mencoba cara membuat share artikel blog ini dan semoga sobat puas dengan

Cara Memasang Button Share Artikel Di Blog

Cara Memasang Button Share Artikel Di Blog  - Membuat tombol share artikel/posting ke berbagai social bookmark saat ini seperti sudah menjadi satu kewajiban bagi seorang blogger. Karena dengan memasang tombol/button share artikel ini justru akan membuka peluang bagi kita untuk mendapatkan tambahan trafik dari berbagai social bookmark seperti Facebook, Twitter, Reddit, Digg, StumbleUpon, Myspace, Google Buzz atau mungkin Google Plus One (+1). Nah pada tips blogging kali ini saya mau share bagaimana cara memasang button share artikel (Bagikan Artikel ini ke…) di blog sobat yang kode scriptnya saya ambil dari layanan Addthis.com. Dengan memasang script dari Addthis ini maka sobat blogger dengan mudah dapat membagikan (share) artikel anda ke ratusan layanan social bookmark hanya dengan sekali klik saja. Tombol/button share social bookmark ini nantinya akan berada diatas postingan atau dibawah judul artikel, mirip seperti yang ada di blog ini (tapi ngga sama lho..).

Dibawah ini ada 3 script untuk membuat tombol/button share artikel berikut preview gambarnya :

1.       Kode script button share style-1:

<!-- AddThis Button BEGIN -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="addthis_toolbox addthis_default_style ">

<a class="addthis_button_preferred_1"></a>

<a class="addthis_button_preferred_2"></a>

<a class="addthis_button_preferred_3"></a>

<a class="addthis_button_preferred_4"></a>

<a class="addthis_button_compact"></a>

<a class="addthis_counter addthis_bubble_style"></a>

</div></b:if>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71feed783c3890"></script>

<!-- AddThis Button END -->

2.       Kode script button share style-2:

<!-- AddThis Button BEGIN -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="addthis_toolbox addthis_default_style addthis_32x32_style">

<a class="addthis_button_preferred_1"></a>

<a class="addthis_button_preferred_2"></a>

<a class="addthis_button_preferred_3"></a>

<a class="addthis_button_preferred_4"></a>

<a class="addthis_button_compact"></a>

<a class="addthis_counter addthis_bubble_style"></a>

</div></b:if>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71ff8750bee738"></script>

<!-- AddThis Button END -->

3.       Kode script button share style-3:

<!-- AddThis Button BEGIN -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="addthis_toolbox addthis_default_style ">

<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>

<a class="addthis_button_tweet"></a>

<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>

<a class="addthis_counter addthis_pill_style"></a>

</div></b:if>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71fdea5bff8d67"></script>

<!-- AddThis Button END -->

Nah dari 3 style button share social bookmark yang ada diatas, tinggal sobat pilih aja mau menggunakan yang mana. Adapun cara pemasangannya pada template, ikuti langkah-langkah dibawah ini :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Edit HTML, centang Expand widget template.

3.       Cari kode <data:post.body/>  atau kode <div class='post-header-line-1'/>  pada template anda ( salah satunya saja ! ) dan letakkan script button sharenya diatas kode tadi.

4.       Save template dan lihat hasilnya.

Nah sekarang sobat blogger dan pengunjung blognya sudah bisa melakukan share artikel yang sedang dibaca ke berbagai social bookmark. Berdo’alah semoga orang lain yang melihat link blog anda di social bookmark tertarik untuk mengklik link tersebut dan sobat akan mendapatkan trafik-trafik baru yang datang dari layanan social bookmark tersebut. Mudah-mudahan tips blogging cara memasang tombol share artikel ke social bookmark ini berguna untuk anda. Salam Blogger.

Cara Membuat Floating Share Button  - Membuat share artikel melayang (floating button) ini merupakan kelanjutan dari posting saya sebelumnya Cara Memasang Button Share Artikel di Blog. Bedanya kalau tombol share melayang ini hanya untuk berbagi artikel ke 4 layanan social bookmark saja yaitu share artikel ke Facebook, Twitter, Google Buzz dan Google Plus One ( +1 ). Yang penting bisa berbagi artikel postingan lah.

Baik sobat langsung saja nih cara memasang share button melayang di blog :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script dibawah ini dan paste kedalam gadget baru tadi.

 

<style>

#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>

<div id="pageshare" title="Get this code from rayhanzhampiet.blogspot.com">

<div class="sbutton" id="fb">

<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">

</script></div>

<div class="sbutton" id="rt">

<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">

</script></div>

<div class="sbutton" id="gb">

<a class="google-buzz-button" data-button-style="normal-count" href="http://www.google.com/buzz/post" title="post on google buzz">

<script src="http://www.google.com/buzz/api/button.js" type="text/javascript">

</script>

</a></div>

<div class="sbutton" id="gplusone">

<script src="http://apis.google.com/js/plusone.js" type="text/javascript">

</script>

<g:plusone size="tall"></g:plusone></div>

</div>

4.       Save / Simpan.

Update 5 Maret 2012 :

Cara pemasangan widget pada template:

1. Ganti/edit kode #pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; dengan kode ini #pageshare {display:scroll;position:fixed;top:165px;left:30px;
2. Login ke dashboard blogger, pilih Rancangan > Edit HTML
3. Letakkan script widget tepat diatas kode   pada template.
4. Save / Simpan.

Cukup singkat bukan ternyata cara pasang share artikel melayang di blogspot ini ? Selamat mencoba cara membuat share artikel blog ini dan semoga sobat puas dengan

Cara Membuat Widget Follow Me Twitter

Cara Membuat Widget Follow Me Twitter – Follow Me On Twitter Widget itu dia istilah kerennya untuk widget ini. Ada berbagai macam jenis widget Follow Me yang sering kita lihat tentunya, mulai dari widget Follow Me animasi sampai yang statis (diam). Dan penempatan widget ini pun bisa dimana saja, bisa di sidebar dan ada juga widget Follow Me yang melayang (floating) bebas ditempatkan di area mana saja. Kali ini saya mau share cara pasang widget follow me twitter melayang aja deh seperti yang ada di blog ini. Sekalian saya kasih 2 tipe sekaligus, yang dengan animasi sama yang statis (diam) alias non animasi biar ngga ada yang minta-minta lagi ya he he.

Widget Follow Me Twitter Melayang dengan Animasi :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script dibawah ini dan paste pada gadget.

<a style="display:scroll;position:fixed;bottom:1px;left:1px;" href="http://twitter.com/rayhanzhampiet" target="_blank"><object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" width="159" height="159"><param name="movie" value="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=http://twitter.com/rayhanzhampiet" /></object></a>

4.      Ganti username Twitter http://twitter.com/rayhanzhampiet dengan akun twitter anda.

5.       Save / Simpan.

Widget Follow Me Twitter Non Animasi (statis) :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script dibawah ini dan paste pada gadget.

<a style="display:scroll;position:fixed;bottom:1px;left:1px;" href="http://twitter.com/rayhanzhampiet" target="_blank"><img src="http://www.twitterbuttons.org/images/twitter-9a.png" width="150" height="124" border="0" /></a>

4.      Ganti username Twitter http://twitter.com/rayhanzhampiet dengan akun twitter anda.

5.       Save / Simpan.

Nah untuk widget follow me twitter yang kedua, sobat dapat menggonta-ganti gambar buttonnya dengan koleksi gambar button follow me yang ada disini http://www.twitterbuttons.org/index.html. Caranya tinggal ganti URL button yang saya tandai dengan warna biru dengan URL button twitter pilihan. Ada puluhan button twitter follow me yang bisa sobat pilih. Contoh gambar-gambarnya yang ada dibawah ini nih :

Oke sobat, sekian dulu sharing kali ini tentang cara memasang widget follow me twitter melayang. Semoga bisa memenuhi keinginan sobat blogger yang pernah menanyakan cara membuat widget follow me ini pada saya beberapa waktu yang lalu. Don’t forget to follow me OK !

Cara Membuat Widget Social Bookmark Melayang Dengan Efek Mouseover

Cara Membuat Widget Social Bookmark Melayang Dengan Efek Mouseover  - Widget untuk berbagi artikel ke layanan social bookmark sudah banyak kita jumpai diberbagai situs. Nah selain widget social bookmark statis yang biasanya ada di sidebar atau pun widget social bookmark melayang yang biasanya ada di halaman posting, masih ada beberapa style lagi yang bisa kita gunakan. Pada tips blogging kali ini saya ingin berbagi bagaimana cara membuat menu navigasi ke layanan social bookmark dengan efek mouseover. Efek mouseover artinya kalau mouse didekatkan pada obyek tertentu maka akan menghasilkan efek tertentu pula, contoh sederhananya seperti pada drop down menu. Hasil dari widget social bookmark dengan tampilan seperti menu navigasi ini dapat anda lihat langsung pada bagian atas header blog saya ini.

Cara membuat navigasi social bookmark melayang (floating social bookmark widget) :

1.       Seperti biasa, login dulu ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script widget social bookmark dibawah ini, dan paste pada gadget.

<style> ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 0px; list-style: none; z-index:999999; width:721px; } ul#navigation li { width: 103px; display:inline; float:left; border:0; } ul#navigation li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#eeeeee; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; text-decoration:none; text-align:center; padding-top:80px; opacity: 0.96; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } ul#navigation li a:hover{ background-color:#CAE3F2; } ul#navigation li a span{ letter-spacing:2px; font-size:11px; color:#60ACD8; font-family:trebuchet-ms, arial, tahoma, Sans-Serif; font-weight:bold; text-shadow: 0 -1px 1px #fff; } ul#navigation .rss a{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSJQU30TiALMrhvRyS71zktbOMN217oDe3Afr0e3s0mvTbWgGLrHbnRyWpKX9b8fm3aWAZ97K2-EJNvG_c74b1dMuyALZ2hMckhLF5STs5EpV9U2MxN4nFB4joE9p-uJtWfWUmuHu_AMU/s1600/64x64.png); } ul#navigation .facebook a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhg9f522By5NKnkoBnAHPDMgFFoE2oIIWArZAD2Xp1xxfrFYXAK7EiJfgor28lfzCpynpZmoBAPn1ppRURtPy5xtxarR2ktEt9SKkg64IVoslzHD4ZO8VRPjdJTvzp_k_9ZgKOt7mJYF4/s1600/64x64.png); } ul#navigation .twitter a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwKOpZY3m5OxKtQpEJd8bk8gk9zbSyJj66zJUn9c6d4WIxibWrELZfNl9h0vBYHjYcfG9K-qcULJRApAwUJkivXuB79OSTLOzanMLkdgXJxUfqgVTVhGquOMuR0jU2Yj9GF0Jgp9HP7G0/s1600/64x64.png); } ul#navigation .googlebookmarks a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH7A-0Ggj0fhmuxx8xoCifsuiiQJlTgjYjqGqgMFb0VnilvSbxI76monkY3IqOYw2iJqka0MwzobTJfMTHll-8Rf9NlKb7ohaQkQSnPCPx2aVDF3RcoE9OyWcmJwvuiraFCy-bbZuvwFs/s1600/64x64.png); } ul#navigation .e-mail a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNyOHmscoPaWP2qgJtc3dw87qR29pAYQo1MAXR29urQwtfn26xcwToxIfYh5UBOKceMuVzs0-W6NlS3Mk_7uE9rJaFHjRZ3psByJPicI-Lo8mQftlPNfX6xO8DGvUopk1JZbAzznHSE6G0/s400/yahoo_64x64.png); } </style> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"> </script> <script type="text/javascript"> $(function() { var d=300; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); }); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); }); </script> <ul id="navigation"> <li class="rss"><a href="http://YOUR-BLOG.blogspot.com/atom.xml">RSS Feed</a></li> <li class="facebook"><a href="FACEBOK-PROFILE">Facebook</a></li> <li class="twitter"><a href="TWITTER-ACCOUNT">Twitter</a></li> <li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li> <li class="e-mail"><a href="<div style="color: red;"YAHOO!-ACCOUNT">Yahoo!</a></li> </ul>

4.       Silahkan edit link akun social bookmark yang ada pada script, sesuai dengan akun social bookmark yang sobat miliki.

5.       Simpan / Save gadget

Widget social bookmark melayang dengan efek mouseover ini sebenarnya dapat juga ditempatkan secara permanen pada template anda. Nah buat sobat blogger yang punya hoby ngutak-ngatik template, cobalah bereksprimen melakukannya. Yang pasti sobat harus menempatkan menu navigasi social bookmark tadi diatas menu blog yang ada pada header. Selamat bereksprimen ya..:D

trik cara membuat breadcrumb/menu navigasi di blogspot

Pastinya sudah banyak yang tau kan apa itu breadcrumb ? Ya breadcrumb adalah menu navigasi yang biasanya terdapat diatas postingan. Tujuannya adalah untuk menunjukkan urutan isi halaman dari Home sampai ke posting artikel yang sedang dibaca. Kalau kita menilik asal muasalnya, menu navigasi breadcrumb ini berasal dari platform Wordpress yang secara default sudah disetting otomatis urutan navigasinya mulai dari Home > Parent Category (kategori utama) > Subcategory > Posting. Sedangkan untuk platform blogger, karena belum ada setting otomatisnya maka kita perlu melakukan sedikit trik cara membuat breadcrumb di blogspot ini. Menu navigasi breadcrumb di blogspot ini kita buat berdasarkan urutan Home > Label > Posting.  Sama seperti di WP, breadcrumb di blogspot tidak akan terlihat pada halaman Homepage, tetapi dapat terlihat pada halaman posting, label dan juga arsip.

Trik Cara Membuat Breadcrumb di Blogspot adalah sebagai berikut :

• Login ke dashboard blogger anda, pilih Rancangan > Edit HTML, centang Expand widget template.

• Cari kode ini ]]></b:skin> pada template anda. Copy kode CSS dibawah ini dan paste-kan kode CSS tepat diatas kode ]]></b:skin>  

.breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;}

• Lanjutkan dengan mencari kode ini <b:include data='top' name='status-message'/>  pada template anda. Letakkan kode dibawah ini dibawahnya.

<b:include data='posts' name='breadcrumb'/>

• Kemudian cari lagi kode  <b:includable id='main' var='top'> . Copy script dibawah ini dan letakkan tepat diatas kode tadi.

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl == data:blog.url'> <!-- No breadcrumb on home page --> <b:else/> <b:if cond='data:blog.pageType == "item"'> <!-- breadcrumb for the post page --> <p class='breadcrumbs'> <span class='post-labels'> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == "true"'> » <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:if> </b:loop> <b:else/> »Unlabelled </b:if> » <span><data:post.title/></span> </b:loop> </span> </p> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <!-- breadcrumb for the label archive page and search pages.. --> <p class='breadcrumbs'> <span class='post-labels'> <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> </span> </p> <b:else/> <b:if cond='data:blog.pageType == "index"'> <p class='breadcrumbs'> <span class='post-labels'> <b:if cond='data:blog.pageName == ""'> <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/> <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/> </b:if> </span> </p> </b:if> </b:if> </b:if> </b:if> </b:includable>

• Cek sekali lagi apakah anda sudah meletakkan kode CSS/script yang diberikan pada tempat yang dimaksud pada langkah 2-4 diatas. Sebaiknya download dulu template anda sebelum dimodifikasi.

• Jika sudah yakin semua langkah diatas sudah dilakukan dengan benar, Save template anda.

Selamat mencoba trik cara membuat breadcrumb di blogspot ini, semoga berhasil !

Cara membuat widget parse HTML

Cara membuat widget parse HTML - Ya widget parse HTML pasti diperlukan bagi sobat blogger yang sering membuat postingan tutorial blog atau Tips dan Trik Bloger. Karena biasanya sobat akan menyertakan penulisan kode atau script HTML pada saat menuliskan artikelnya. Parse HTML ini maksudnya supaya kode atau script yang kita tulis dalam format HTML tersebut bisa muncul atau terlihat pada postingan, jadi harus diconvert atau di-parse dulu maksudnya. Nah seperti apa cara membuat widget parse HML ini ? Berikut saya share cara membuat widget parse HTML untuk anda.

Untuk membuat widget parse HTML sobat tinggal copy script dibawah ini :

<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&amp;up_grows=10&amp;up_conv1=1&amp;up_conv2=1&amp;up_conv3=1&amp;up_conv4=1&amp;up_conv5=1&amp;synd=open&amp;w=315&amp;h=200&amp;title=Post-Code%3A+code+converter&amp;border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&amp;output=js"> </script>

Kemudian paste di dalam postingan sobat (jangan lupa pilih opsi edit HTML),

Nah silahkan sobat coba sendiri ya cara membuat widget parse HTML ini biar ngga pusing lagi harus memparsing kode HTML untuk postingan secara online. Selamat Mencoba.

cara membuat widget recent post dengan thumbnail

Cara Membuat Widget Recent Post Dengan Thumbnail– Widget Recent Post atau artikel terbaru umumnya ditempatkan diposisi sidebar. Sedangkan jenis widget recent post menurut sepengetahuan saya hanya ada 2, yaitu widget recent post dengan thumbnail yang statis/diam  (tidak bergerak) dan ada juga widget recent post dengan slide show/bergerak (model tayangan). Nah yang mau kita bahas pada Tips dan Trik Bloger kali ini adalah membuat widget recent post yang statis tapi ada gambar/thumbnailnya seperti yang ada di sidebar blog ini, biar ngga susah-susah nyari contohnya he he. Cara membuatnya mudah saja koq, silahkan sobat ikuti langkah-langkahnya dibawah ini.

Cara Membuat Widget Recent Post dengan Thumbnail :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Halaman > Add Gadget (HTML/JavaScript).

3.       Copy kode CSS dan JavaScript dibawah ini dan paste pada gadget yang baru dibuat tadi.

<right><style> img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:40px;border:0;float:left;margin:0 0 5px 0px;} .recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:15px;font-color:black;font-family:calibri;} ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs normal {font-size:13px;} </style> <script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script> <script style="text/javascript"> var numposts = 8; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 75; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script></right>

4.       Simpan dan lihat hasilnya.

5.     Silahkan memodifikasi sendiri script ini untuk merubah ukuran gambar/thumbnail, jenis dan warna huruf serta jumlah posting yang ingin ditampilkan pada widget.

Mudah saja bukan cara membuat widget recent post dengan thumbnail ini ? Kalo masih kesulitan juga silahkan tulis dikomentar OK ! Selamat mencoba dan salam blogger.