Pasang Tombol Share Pada Blogspot

Artikel yang Aby buat sekarang ini udah pasti jadi artikel basi... Soalnya udah banyak banget artikel yang nulis sama kayak gini, Trus kenapa Aby tulis lagi, soalnya Aby orang nya suka pelupa, kalo abis baca sesuatu pasti langsung di tutup lagi tanpa ngelihat sumber-nya.

Kalo di tulis di blog sendiri khan enak, suatu saat butuh lagi tinggal liat postingan sendiri dech...hehehe....

Berikut cara pasang tombol share to Facebook, Tweeter, Google + pada Blogspot.

1. Login ke blogspot pakai account blogspot ente

2. Klik menu Tata Letak => Edit HTML => Expand Template Widget

3. Cari kode <div class='post-body entry-content'> atau class='post-body entry-content' dan biasanya ada dua kode tersebut, pakailah kode yang pertama

4. Jika sudah ketemu, copy kode dibawah ini dan paste tepat diatas kode <div class='post-body entry-content'>.

<b:if cond='data:blog.pageType == "item"'>

<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:5px 0px 5px 0px;width:100%;float:left;height:20px;'>

<div style='float:left;padding-left:0px;font:normal 12px Georgia;'>

Share on :

</div>

<div style='float:left;padding-left:10px;'>

<a name='fb_share' type='button_count'/>

<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>

</script></div>

<div style='float:left;padding-left:10px;'>

<a class='DiggThisButton DiggCompact'/>

<script type='text/javascript'>

(function() {

var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];

s.type = 'text/javascript';

s.async = true;

s.src = 'http://widgets.digg.com/buttons.js';

s1.parentNode.insertBefore(s, s1);

})();

</script>

</div>

<div style='float:left;padding-left:10px;'>

<a class='twitter-share-button' data-count='horizontal' data-via='User Name' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

</div>

<div style='float:left;padding-left:10px;'>



<g:plusone size="medium"></g:plusone>



<script type="text/javascript">

(function() {

    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

    po.src = 'https://apis.google.com/js/plusone.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

})();

</script>

</div>

</div>

</b:if>

Simpan template dan liat dech hasilnya.....

Memasang Wibiya Platform di Blog

Untuk blogger senior mungkin tutorial ini dianggap "copo" atau "sampah" karena hampir semua blogger senior tau bagaimana sih cara memasang wibiya platform di blog kita. Tapi untuk nyubi seperti saya ini :x, membuat postingan ini bener-bener merupakan suatu kebanggaan tersendiri sebagai blogger pemula :p.

Sebelum kita melangkah lebih lanjut.... (mantab kata-katanya.... :D), kita harus tau dulu apa sih Wibiya itu?

Wibiya Platform adalah cwe tetangga depan rumah ane.... (ciaaaaaah...malah ke cwe nyambungnya, abis nama Platform ini mirip banget sama nama cewe' sih.... :o), sorry rada OOT... Wibiya Platform ini adalah aplikasi berbentuk toolbar yang menampung multi aplikasi yang biasanya ada di bawah blog ato web kamu

Nah trus, gunanya apa si Wibiya itu... ??? Nah ini beberapa keterangan aplikasi yang ada di Wibiya Platform.

1. Live Notifications

Broadcast alerts, messages, news, and more to your visitors. Notifications will be displayed in real-time.

2. Galeri Foto

Menyediakan pembaca Anda dengan galeri foto yang komprehensif menggunakan Cooliris 3D Wall. Toolbar aplikasi ini juga mendukung Flickr dan Picasa.

3. Twitter Dashboard

Biarkan pengguna Anda menikmati pengalaman Twitter tweets penuh langsung dari situs web Anda, termasuk, tweets terbaru, pencarian dan lebih

4. Facebook Fan Page

Menghubungkan Fan Page dengan situs web Anda menggunakan toolbar ini Facebook dan meningkatkan jumlah penggemar.

5. iTranslation

Terjemahan - tidak kembali halaman yang diperlukan! Mengizinkan Anda untuk menerjemahkan halaman apapun di situs Web Anda ke dalam bahasa apapun dengan satu klik mouse.

6. YouTube Video Galeri

Buat video galeri yang komprehensif melalui Cooliris 3D Wall. Dukungan penuh untuk YouTube Saluran, Pengguna, Best Feed dan Cari.

Okey, sekarang kita mulai bagaimana sih masangnya....

1. Kunjungi http://www.wibiya.com dan klik Get It Now.

2. Isi Form berikut seperti :

Full Name = isi dengan nama lengkap anda.
Email Address = Isi dengan alamt email anda.
Password = Isi dengan password yang anda inginkan.
Site Name = Isi dengan nama web/blog anda.
Site Url = Isi dengan alamt web/blog anda.
Site Language = Isi dengan bahasa yang anda gunakan di blog anda.
Setelah semuanya terisi klik Next.

3. Pilih warna Wibiya Platform yang anda inginkan dan klik Next.

4. Jika anda sudah memilih warna Wibiya Platform anda, anda akan masuk ke Select Your Apps, klik aplikasi yang tidah mau anda gunakan di Platform anda. jika sudah anda memilih aplikasi yang mau anda gunakan anda klik Next

Catt: Jika anda gunakan aplikasi YouTube Video Galeri, Twitter Dashboard, Facebook Fan Page, Latest Posts, Subscribe. Anda harus isi dulu user name kalau menggunakan Twitter Dasbord, alamat feed RSS anda jika menggunakan aplikasi Subcribe dan yang lainnya saya tadi sebutkan. Setelah semuanya anda klik Done.

5. Setelah selesai semuanya di setting, anda bisa langsung memasang di Blog anda (Pilih Blogger untuk menginstall Wibiya Platform jika blog anda di buat di blogger) dan selesai memasang Wibiya Platform di Blog.

So, keep learning and learning... CU in another post

Membuat Floating Menu dengan jQuery

Alhamdulillah, setelah nyari kasak-kusuk ke sana kemari, akhirnya saya dapet juga nih cara bagaimana bisa nampilin menu melayang dengan menggunakan jQuery.

Sempet stress juga karena ga nemu-nemu (maklum di google.co.id banyak yang nampilin situs spam).

Tapi akhirnya nemu di salah satu blog yg templatenya mirip banget sama template saya... (kok bisa sama gitu ya templatenya, pasti sama-sama dari Kang Choen... )

1. Masukin script jQuery ini dibawah </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://granoblog.googlecode.com/files/jquery.dimension.js' type='text/javascript'></script>

2. Copy paste kode css berikut,

#floatMenu {
position:absolute;
top:150px;
float:right;
width:200px;
}
#floatMenu ul {
margin-bottom:10px; list-style: none;
}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border:2px solid #999;-moz-border-radius: 12px;
-webkit-border-radius: 12px;
text-decoration:none;
text-align:center;
color:#ccc;
margin-bottom:10px;
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
}
#floatMenu ul.menu1 li a:hover {
border-color:#fff;
}
#floatMenu ul.menu2 li a:hover {
border-color:#fff;

¤ Mungkin css nya masih jelek banget, edit lagi aja sesuai selera sobat blogger

Taruh kode css tersebut sebelum ]]></b:skin>

3. Copy javascript ini persis di bawah kode jQuery yang tadi

 <script language='javascript'>
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:1500,queue:false});
});
});
</script>

¤ duration:1500, merupakan seberapa cepat effect floating, Semakin banyak durationnya, maka semakin lambat pula effect floatingnya (atur sendiri sesuai selera ya Sob..)

4. Taruh kode HTML ini pas dibawah <body>

<div id='floatMenu'>
<ul class='menu1'>
<li><a href='http://aa-iebra.blogspot.com/'> Beranda </a></li>
</ul>
<ul class='menu2'>
<li><a href='http://aa-iebra.blogspot.com/'> Tentang Saya </a></li>
<li><a href='http://aa-iebra.blogspot.com/'> Kontak </a></li>
<li><a href='http://aa-iebra.blogspot.com/'> Protofolio </a></li>
</ul>
</div>

¤ Untuk tulisan yang berwarna biru, dapat diganti dengan link blog sobat

Ok, sekian dulu sedikit tips dari Ibra... untuk yang koneksi nya lemod sama kurang jelas bacanya, silahkan ambil script jadinya di sini.

Thanks for Kang Guireno, atas sedikit sumbangan ilmunya

Tampilan Judul Postingan Pada Home Blogspot

Jika anda saat ini NgeBlog di blogspot dan mempunyai permasalahan kecil seperti untuk membuka home/halaman depan terasa berat, inilah tips-tips nya untuk menanggulangi permasalahan tersebut. Biasanya ditemui dengan banyaknya postingan yang tampil serta isi posting/konten yang banyak sehinggga memerlukan pengambilan data server yang cukup ekstra untuk menyelesaikannya sampai beres.

Inilah tips yang mungkin harus anda coba yaitu pada halaman depan/home hanya menampilkan judul postingan saja, sebagai berikut :

¤ Silahkan login ke blogger dengan ID anda.

¤ Klik Rancangan

¤ Klik menu Edit HTML

¤ Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.

backup template

¤ Carilah kode ]]></b:skin>

¤ Copy kode berikut, lalu paste di bawah kode ]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body{display:none;}
</b:if>
</b:if>
</style>

¤ Klik tombol SIMPAN TEMPLATE

Selesai. Silahkan lihat hasilnya.

Mudah bukan? namun, dengan memasang kode di atas masih menyisakan beberapa elemen seperti tanggal posting, komentar dan yang lainnya. Jika anda ingin menghilangkan semuanya dan yang tersisa hanya judul post nya saja, mungkin anda bisa menggunakan kode berikut :

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>

Jika ternyata masih ada elemen tersisa selain judul post, mungkin kode template anda tidak mengikuti standar template blogger.

Membuat Blog di Bloger.Com

Setelah membaca artikel tantang pengenalan Blog, tentunya ngga afdol kalo kita ngga langsung untuk belajar bagaimana cara membuat blog. Tentunya blog yang dipakai disini adalah blogger.com, karena selain gratis, interface blog ini juga sangat mudah sehingga para blogger baru tidak akan kesulitan saat pertama kali memulai.

Langkah pertama yang harus kita lakukan sebelum kita membuat blog adalah membuat email. Walaupun ente sudah mempunyai email, usahakan ente menggunakan email dari google untuk mulai nge-blog. Selain karena memang satu platform, konektifitas antara keduanya sangatlah mudah, untuk lebih lengkapnya mengenai kelebihan Gmail, ente bisa mengunjungi artikel Ierzha yang berjudul Kelebihan Gmail dibanding Layanan Yang Lain.

Setelah ente mempunyai email, kemudian ente masuk www.blogger.com dan klik DAFTAR

Nanti ente akan menemui form pengisian seperti ini. Isi semua kotak-kotak yang kosong sesuai dengan yang perintahkan.

Setelah kotak-kotak terisi semua, silakan meng-klik Langkah Berikutnya untuk mulai membuat blog.

Setelah itu, ente bisa membuat judul blog ente disini, serta membuat URL blog ente, jangan lupa isi verifikasi katanya dan klik LANJUTKAN untuk masuk ke proses berikutnya.

(saran Ierzha: Tulislah judul dan URL Blog ente dengan konten yang spesifik dan tidak umum dipakai orang)

Di tahapan ini, ente bebas untuk memilih template untuk Blog ente, jangan takut untuk salah pilih karena ente bisa merubahnya nanti.

Akhirnya selesai dech proses pembuatan Blog... Happy Blogging dan jangan lupa ikutin terus artikel Ierzha ini untuk informasi berguna lainnya

Jagoan VPS | Best Virtual Private Server

Pasang Tombol Share Pada Blogspot

Memasang Wibiya Platform di Blog

Membuat Floating Menu dengan jQuery

Tampilan Judul Postingan Pada Home Blogspot

Membuat Blog di Bloger.Com

Labels

Popular Post

Pengikut

Archive