Skip to main content

Posts

Showing posts from May, 2013

Membuat Horizontal Floating Share Sosial Di Blogger

Sebelumnya mau curhat dikit, maaf karena baru sempat posting karena belakangan ini banyak tugas campus dan juga kesehatanku yang kurang baik. Nah, di weekend yang ceria ini saya ingin berbagi widget sosial share floating atau melayang horizontal. Pasti Anda sudah tidak asing lagi mendengarnya karena pada postingan sebelum saya banyak membahas tentang tutorial widget sosial melayang dengan gaya horizontal maupun vertikal. Tapi widget ini berbeda dengan yang telah saya bahas sebelumnya, karena widget ini akan ditempatkan di bawah judul posting dan akan melayang bersama dengan layar saat Anda scroll ke bawah. Berikut fitur widget horizontal sosial share floating:

widget dilengkapi dengan tombol sosial sepert facebook, twitter dan google+. menggunakan jQuery yang sederhana sehingga lebih cepat saat load mengapung sampai bagian komentar blog sebuah ikon link komentar yang akan mengarahkan pengunjung ke kotak komentar


LIVE DEMO


Artikel Terkait : Cara Membuat Tombol Share Media Sosia…

Cara Menghilangkan Link Pengeditan Cepat dan link kunci di Blogger

Saat melakukan pratinjau atau melihat blog Anda, pasti Anda akan melihat logo pengeditan cepat atau ikon pencil dan ikon obeng. kedua link tersebut akan membantu Anda untuk lebih mudah mengolah posting Anda atau gadget yang ada di blog Anda. Tetapi jika Anda merasa tidak nyaman atau ingin menghilangkanya dari blog Anda itu bisa lakukan dengan cara mudah di bawah ini.
Dengan menghapus link tersebut berarti Anda mengurangi jumlah link eksternal di Blog Anda dan juga membuat lebih Search Engine Friendly. Namun langkah dibawah hanya untuk menghilangkan bukan menghapusnya.
Artikel terkait : Cara Menggunakan Template Editor Blogger Versi Baru Cara Menghilagkan Link Kunci Inggris dan Pengeditan Cepat Login ke Blogger Anda klik Tata Letak - pilih Posting Blog gadget klik Edit Hapus tanda centang "Tunjukan pengeditan cepat" - Simpan
Langkah selanjutnya klik Template - pilih Edit HTML Cari kode di bawah ini, gunakan Ctrl-F untuk mencari :<b:include name='quickedit'/> …

Cara Install Dan Menambah Google Analytics Di Blogger

Google Analytics adalah tool terbaik yang disediakan oleh Google, karena dengan mudah kita dapat melacak dan memeriksa statistik yang akurat dan real time atau nyata dari trafik blog Anda. Dan juga dapat memeriksa tingkat bouncing pada blog Anda, pengunjung unik, tampilan halaman dan juga kunjungan yang datang ke blog, dengan menambahkan Google Analytics di blog Anda. Selain itu, tool ini akan sangat membantu Anda dengan mengetahui apa yang terjadi di blog Anda dan juga perilaku dari pengunjung blog sehingga akan muncul suatu ide atau langkah yang tepat untuk meningkatkan lalu lintas di blog Anda. Ok, setelah Anda mengetahui apa itu Google Analytics, mari kita lanjutkan dengan menginstal atau menambah Google Analytics di blog Anda.
Artikel terkait : Cara Membuat Sitemap HTML di Blogger Cara Menambah Sitemap Blog di Google Webmaster Tools Membuat Akun di Google Analytics
Sebelum Anda menambahkan Google Analytics ke blog Anda, yang harus Anda lakulan pertama kali membuat akun Go…

Membuat Stickybar Dengan Tombol Sosial Di Blogger

Pada postingan kali ini kita akan membuat bar melayang simple atau Stickybar di blogger dengan media sosial facebook dan Google+ yang akan tampil disemua halaman blog. Stickybar sangat simple dan mudah untuk Anda edit dan juga bagus untuk Anda yang ingin menambah sebuah pesan singkat berupa iklan atau link rujukan. Selain itu stickybar ini dilengkapi dengan tombol follow atau like untuk facebook dan google plus.

LIVE DEMO
Artikel yang terkait :
Cara Membuat Horizontal Floating Share Sosial di Blogger


Untuk menambahkan Stickybar di blog Anda ikuti langkah-langkah di bawah ini.
Login ke Blogger AndaKlik Template - Pilih Edit HTMLCari kode di bawah ini, gunakan Ctrl+F untuk mencari :
]]></b:skin>
Selanjutnya tambahkan kode CSS di bawah ini tepat di atasnya :
#satudelapan_bar{ background:#a7a7ab url('http://1.bp.blogspot.com/-Da3j_tIh5vI/UZ0p9tSaPEI/AAAAAAAABC8/eLt_kQWMUyw/s1600/stickybar-satudelapan.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
pa…

Floating Share Sosial Horizontal Baru Untuk Blogger

Tidak sengaja saat jalan-jalan ke halaman orang lain nemu widget yang keren, namanya Widget Floating Share Sosial Horizontal Baru Untuk Bloggeryang tentunya dengan jQuery yang baru juga. Untuk fungsinya sama seperti Floating Share yang kita ketahui tapi berbeda dari tampilannya. Untuk floating yang lama barnya vertikal nah kalo floating baru barnya horizontal. Dan di lengkapi dengan 3 media sosial seperti Facebook, Twitter dan Google Plus. Mungkin ketiga media online utama itu masih kurang karena banyak sekali media sosial yang ada, tapi kalau di perhatikan scriptnya kita bisa untuk menambah tombol media sosial yang lain.

Artikel terkait :
Cara Membuat Tombol Share Media Sosial di BloggerTombol Share Sosial Floating Bar di Blogger Tombol Share Sosial Media Floating atau Melayang di Blogger 

Untuk menerapkan widget Floating Horizontal ke blogger Anda, ikuti langkah-langkah berikut ini :

Login ke Blogger Anda - klik TemplatePilih Edit HTML - dan cari tag </head> gunakan Ctrl+…

Tombol Share Sosial Floating Bar di Blogger

Tanpa basa-basi lagi sekarang saya mau berbagi widget Tombol Share Floating atau Melayang Bar di Blogger, mungkin sebelumnya Anda telah membaca Artikel saya yang sebelumnya Cara Menambah Tombol Share Like Floating atau melayang di Blogger. Nah, widget yang saya akan bagikan ini sama seperti widget tersebut hanya lebih simple dan fungsinya hanya untuk membagi atau mengeshare artikel kita ke media sosial seperti facebook, twitter, Google+, Pinterest, dll. Langsung saja di tambah di blog Anda.

Artikel yang terkait :
Cara Menambah Tombol Share Like Floating di BloggerCara Membuat Tombol Share Media Sosial di Blogger
Hasilnya bisa Anda lihat disini : LIVE DEMO

Langkah - langkah Membuat Tombol Shared Bar Floating di Blogger :

Seperti biasa, Login ke Blogger AndaKlik Template - Pilih Edit HTMLTekan Ctrl+F - dan cari tag </head>Kemudian salin kode di bawah ini tepat setelah kode </head>
<script type="text/javascript">var switchTo5x=true;</script>
<script type…

Membuat Halaman Statis Blogger Dan Lebih Dari 20 Halaman

Tutorial kali saya membahas tentang Cara Membuat Halaman Statis dan Lebih dari 20 Halaman Statis. Secara default bila kita ingin membuat halaman statis lebih dari 20 akan muncul pesan seperti di bawah ini :


Tapi jangan khawatir dengan mengikuti trik mudah di bawah ini Anda dapat membuat lebih dari 20 halaman di halaman blog Anda. Mungkin Anda berpikir buat apa halaman sebanyak itu? Anda bisa memanfaatkan halaman statis untuk halaman kontak, Membuat Halaman Daftar Isi atau mungkin yang saya terapkan di halaman blog saya seperti halaman alihan seperti Page Not Found 404 atau halaman link Demo (2 topik tersebut segera menyusul). Trik di bawah ini bisa di katakan kita meng-hack page blogger tapi bukan dengan niat yang jahat tapi untuk pengetahuan..iya tidak. Ok cukup pembahasannya dan mari kita lanjutkan dengan trik di bawah ini.

Catatan : Untuk menghindari hal yang tidak diinginkan Anda boleh mencobanya di akun Blogger Tes Anda, kalau belum punya Anda buat Bolgger baru untuk b…

Cara Menambah Breadcrumb di Blogger

Breadcrumb merupakan navigasi menu yang menunjukan lokasi pengunjung pada halaman blog Anda. Hal digunakan untuk membuat website kita lebih user friendly, yang mana pengunjung dapat dengan mudah mengunjungi halaman blog Anda tanpa masalah. Hal ini juga dapat membantu meningkatkan pencarian blog Anda di mesin pencari dengan menambahkan kata kunci ke dalam postingan blog Anda. Contoh jika Anda menulis postingan tentang Cara Install dan Menambah Disqus Di Blogger dan tag dengan nama label Tips Blog akan menciptkan menu navigasi atau jejak di bagian atas judul postingan Anda sebagai berikut :


Setelah memahami apa itu Breadcrumb mari kita lanjutkan dengan menambah Breadcrumbs di Blogger Anda.
Ikuti langkah-langkah berikut :
Login ke Akun Blogger Anda - Edit HTMLTekan Ctrl+F dan cari kode berikut : <b:include data='top' name='status-message'/>Tambahkan kode berikut tepat setelah kode di atas : <b:include data='posts' name='breadcrumb'/>Langka…

Cara Install dan Menambah Disqus Comment di Blogger

Apa itu DISQUS ?
Disqus merupakan platform atau forum diskusi favorit didunia yang dapat berjalan disemua paltform tidak perduli platform apa yang Anda gunakan dan Anda dapat meng-upgrade sistem komentar Anda dengan cara baru dan menarik untuk pengunjung.

Mengapa menggunakan Disqus?
Disqus dirancang agar mudah untuk kedua komentator dan pembaca saling berdiskusi sehingga mendorong keterlibatan nyata di lalu lintas web atau blog Anda. Dan juga terdapat beberapa kelebihan dari Disqus, antara lain : Komunitas Disqus yang banyak dan telah di percaya oleh banyak pengguna. Tampilan Antarmuka yang indah dan dapat menyesuaikan dengan tampilan website atau blog Anda. Pengguna Dapat dengan mudah menemukan percakapan menarik lainnya yang terjadi di blog atau Website Anda. Sehinga dapat meningkatkan lalu lintas website Anda melalui platform Disqus yang saling terhubung. Sharing Sosial, memungkinkan pengguna dengan mudah berbagi komentar atau thread diskusi ke jaringan sosial favorit mereka.…

Tampilan Baru Google Plus 2013

Saat ini Google+ telah hadir dengan beberapa perubahan yang secara keseluruhan hanya menambahkan fungsi danfungsionalitas seperti sampul foto,tab baru, review, halaman about me dengan tata letak multi kolom, dll. Seperti yang kita lihat pada perubahan UI Google+sekilas terlihat seperti Timeline Facebook tapi Google Plus berbeda, mereka memiliki feed kolom ganda.
Google Plus baru antarmukanya lebih sederhana dan lebih nyaman buat dilihat dengan tampilan timeline yang multi-kolom dan juga sticky navbar yang berada diatas dengan tab Hangouts icon disebalah kanan, Foto, Tentang, dll. Dan di sisi kiri sidebarterdapat akses tersembunyi untuk ke profil, mengatur foto, komunitas, acara, siaran hangout, yang lagi ngetren, game, pengaturan, dll.




Google Plus – Multi Kolom
Sekilat memang tampak seperti Timeline Facebook, namun Google Plus lebih dari apa yang kita perhatikan. Contohnya saat kita memulai untuk memposting teks, photo, video, tautan atau hangout maka kolom yang muncul akan…

Cara Mudah Menambah Ikon Link "Back To Top" Keren Untuk Blogger

Pada postingan ini saya membawa tutorial tentang cara mudah menambah ikon link back to top keren untuk blogger, yang mana fitur ini akan memudahkan pengunjung blogger Anda untuk kembali ke halaman atas setelah membaca artikel yang panjang atau browsing posting di halaman awal. Ikon link yang digunakan dalam blog ini dalam ukuran kecil sehingga tidak akan merusak tampilan blog dan juga Anda dapat mengatur sendiri ukuran atau posisi dari ikon linknya. Nah, untuk lebih jelasnya ikuti langkah berikut.

Menambah Ikon Link Back To Top

Login ke Blogger Anda Klik Tata Letak - klik Tambahkan GadgetDan pilih HTML/JavascriptSelanjutnya copy dan paste script berikut :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#rb-top").fadeIn()}else{$("#rb-top").fadeOut()}});$(&q…

Cara Menambah Tombol Share Sosial Media Floating atau Melayang di Blogger

Salah satu cara untuk meningkatkan lalu lintas blog Anda dengan menambah widget share media sosial di blog Anda. Dan kali ini saya akan berbagi gatget yang mungkin sudah tidak asing lagi bagi pembaca, gadget sosial share ini sangat terkenal karena mempunyai fungsi scroll bar sehingga memungkinkan lalu lintas blog Anda meningkat. 


Pada gadget ini mencakup banyak media sosial di dalamnya seperti facebook, twitter dan Google Plus dan pinterest juga. Nah, sekarang mari kita praktek bagaimana cara menambah Tombol Share Floating Bar Media Sosial di halaman posting Anda.
Artikel terkait : Cara Membuat Tombol Share di Bawah Posting


Menambah Floating Bar Media Sharing :

Di bawah ini adalah beberapa langkah mudah yang perlu Anda lakukan.

Login - Masuk ke Halaman Dashboard Blogger AndaKlik TemplateSetelah halaman editor Blogger terbuka, tekan Ctrl+F untuk mencari kode berikut :<b:includable id='post' var='post'>Selanjutnya copy paste kode di bawah tepat setelah kode d…