Showing posts with label Widgets. Show all posts

Home Widgets

Tambahkan Tombol Sharing Elegan Dari AddThis Untuk Blog Anda

9:45:00 AM

tombol share addthis
Anda mungkin sudah tahu tombol sharing dari AddThis yang biasanya dipasang di bawah postingan blog. Tombol share dari AddThis adalah fitur yang sangat berguna untuk blogger. AddThis tidak hanya memberikan Anda sarana untuk berbagi konten Anda, tapi juga memonitor informasi untuk menganalisis data dan memberikan wawasan kepada penerbit dan mencatat tren terbaru. Dalam proses ini, tombol share AddThis telah berkembang menjadi lebih cepat dan kuat yang tidak hanya dapat dengan mudah diintegrasikan dengan situs web Anda, tapi juga memberikan pengalaman berbagi yang mudah untuk pembaca Anda. AddThis telah merilis sebuah tombol sharing yang ramping dan elegan yang disertai dengan penambahan banyak fitur baru. Mari kita lihat apa yang baru dan bagaimana untuk mendapatkannya.

Apa Yang Baru?
Perubahan yang paling jelas adalah desain. Tombol share terlihat lebih baik, compact menu terlihat lebih ramping, dan bentuk email memiliki tampilan baru. Selain itu, drop-down menggunakan HTML5 dan JQuery, waktu loading lebih cepat dan dioptimalkan sehinggan menjadi lebih baik. Menurut AddThis sendiri, desain telah disempurnakan dan ditingkatkan sebanyak 11%!

Lalu ada fitur yang baru pada halaman sharing. Biasanya, untuk berbagi suatu artikel, Anda harus membuka jendela baru dan kemudian meng-klik tombol share/post. Jelas ini akan membuat proses load halaman menjadi lebih lambat. Namun, saat ini AddThis menyediakan Anda fitur sharing "instan". Sekarang pengguna tidak lagi harus meninggalkan halaman Anda untuk berbagi konten Anda, karena bisa dilakukan langsung dari tombol AddThis!

share addthis

AddThis juga menyediakan tombol sharing pada Pinterest menjadi lebih mudah. Sederhananya, AddThis dapat digunakan pada halaman apapun di situs Anda, dan pengunjung Anda secara otomatis akan melihat semua gambar pada halaman tersebut dalam tampilan light-box. Dengan itu pengunjung dapat dengan mudah memilih media sharing apa yang akan mereka gunakan. Sederhana dan efektif!

Cara Menambahkan Tool Sharing dari AddThis
Menambahkan fungsi ini ke situs Anda benar-benar mudah! Cukup kunjungi halaman situs AddThis, dan memilih jenis tombol yang Anda inginkan. Anda dapat memilih dari antara tujuh gaya yang berbeda yang dapat Anda tampilkan di situs Anda. Setelah dipilih maka Anda akan melihat kode yang harus Anda pasang di website Anda. Letakkan kode tersebut pada template atau widget di blogger/ situs Anda.
Artikel lain yang kami anjurkan: Memasang Tombol Share AddThis di Bawah Postingan
tombol berbagi addthis
Ini adalah tool yang berguna sekali untuk membagikan konten dan meningkatkan traffic situs Anda dan harus mencobanya di blog Anda. Analisis menunjukkan bahwa tool ini dapat meningkatkan aktifitas sosial sharing sebanyak 11% dan 20% untuk Twitter. Hal ini disebabkan karena lebih user friendly dan tidak mengganggu kenyamanan pengunjung Anda. AddThis adalah tool yang mudah digunakan, mudah untuk sharing, dan memberikan pilihan gaya yang berbeda.
Itu tadi adalah gambaran singkat mengenai layanan dari AddThis. Jika Anda memiliki pertanyaan atau masalah, sangan ragu untuk menghubungi kami kapan saja. Karena kami akan senang untuk membantu.

Read More

Cara Memasang Widget Recent Posts Dari FeedBurner di Blogger

9:43:00 AM

Anda mungkin telah melihat widget recent post yang terpasang di sidebar beberapa blog tapi paling sering widget ini menggunakan kode JavaScript sehingga akan meningkatkan waktu buka halaman website/ blog Anda. Kali ini saya akan berbagi tutorial bagaimana cara menambahkan widget Recent Post yang ditawarkan FeedBurner ke dalam blog Anda dengan rapi, menarik, unik, dan yang paling penting loading blog cepat.
Biarkan saya memberitahu Anda bahwa FeedBurner juga menggunakan JavaScript, tapi itu sudah disesuaikan ketika dipasang di dalam blog Anda dan tidak memperberat loading blog karena JavaScript ini tidak secara langsung terhubung ke blog Anda. Jadi 50% dari waktu loading dibagi oleh FeedBurner.
Widget FeedBurner Recent Post
FeedBurner seperti yang Anda semua tahu adalah layanan web untuk mengirimkan feed blog Anda. Setelah Anda mendaftar FeedBurner maka dia akan menyediakan Anda beberapa widget seperti Rotating Headlines Banner, Subscription Email form seperti yang Anda lihat di sidebar, feed counter, dan yang paling penting adalah Widget Recent Posts seperti yang ada di sidebar saya.
feedburner recent posts
Berikut ini langkah-langkah yang harus Anda lakukan:
  • Buat dulu Akun Feedburner Anda, saya harap Anda sudah memilikinya.
  • Login ke akun Feedburner Anda dan klik tombol Publicize seperti gambar di bawah ini.
feedburner recent posts
  • Kemudian klik BuzzBoost yang ada di sidebar kiri.
feedburner recent posts
  • Pada halaman yang muncul, Anda akan melihat formulir sederhana seperti ini.
feedburner recent posts
Isilah formulir dengan informasi yang relevan. Biarkan saja semua item tidak usah dicentang. Pada "Number of items to display" silahkan Anda isi dengan berapa link yang akan Anda munculkan nanti dan saya mengisikan angka 8 tapi 6 juga sudah cukup. Pada "Open links in" pilihlah Same Window. Kemudian klik tombol Save yang ada di bagian bawah.
  • Langkah selanjutnya, copy semua kode yang ada di bagian atas seperti pada gambar ini.
feedburner recent posts
  • Selanjutnya Login ke akun blogger Anda
  • Masuk ke tab Layout dan klik Add a Gadget 
add a gadget
  • Kemudian pilihlah HTML/JavaScript.
blogger html/javascript
  • Sekarang Paste kode tadi ke dalam widget dan berilah judul Recent Posts
  • Selesai
Semoga tutorial singkat ini dapat membantu Anda, bila ada yang kurang dimengerti silahkan tuliskan pertanyaan Anda dalam kotak komentar yang ada di bawah ini.

Read More

Cara Memasang Widget Footer Multi Kolom di Blogger - Tampilan Menarik

9:40:00 AM

multi kolom blogger
Saya sebelumnya telah berbagi tutorial tentang cara menambahkan widget footer 3 kolom di blog dengan mudah, dan hari ini saya akan berbagi tutorial memasang widget footer multi kolom yang canggih di blog. Widget ini dapat menjadi 3 kolom, empat kolom, atau banyak kolom tergantung yang Anda inginkan. Selanjutnya widget footer ini memiliki beberapa efek CSS yang ditambahkan ke dalamnya yang membuatnya lebih baik. Marilah ikuti serangkaian langkah mudah berikut ini untuk memasangnya.

Cara Menambahkan Widget Multi Kolom di Blogger!
Pertama-tama kita akan menambahkan kode CSS dalam template blogger Anda dan kemudian tambahkan kode HTML-nya. Jadi tanpa membuang banyak waktu mari kita langsung menuju langkah-langkahnya.
  • Login dulu ke akun Blogger Anda
  • Klik Tab Template (pada menu drop down)
  • Backup dulu template Anda bila perlu
  • Klik Edit HTML
  • Carilah kode ]]></b:skin> (gunakan Ctrl + F untuk memudahkan pencarian)
    Kemudian letakkan kode berikut ini di bawah kode ]]></b:skin
Buka:
/*----- GNR MULTI COLUMN FOOTER WIDGET -----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
} 

Kemudian cari kode dan paste kode berikut ini tepat di atas kode

<div id='lower'>
<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

<div style='clear: both;'/>
</div> </div>

Simpan Template Anda dan selesai Sekarang Anda masuk ke Tab Layout dan tambahkan widget Anda yang baru di Footer yang telah Anda buat seperti gambar ini.

Anda dapat mengamati bahwa ada empat kolom secara default dan Anda dapat menambahkan atau mengurangi jumlah kolom vertikal dengan mengikuti langkah-langkah di bawah ini: Cara Kostumisasi Widget! Saya akan membahasnya secara sederhana. Saya pikir untuk warna dan ukuran keseluruhan sudah tepat. Satu-satunya hal yang perlu Anda sesuaikan dengan Template Anda adalah lebar widget dan jumlah kolom vertikal. Untuk mengurangi atau menambah lebar keseluruhan widget, Anda tinggal perlu mengubah width: 960px; Jika Anda ingin mengurangi jumlah widget menjadi tiga, maka cukup hapus bagian kode ini:

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

Jika Anda ingin menambahkan ekstra kolom, maka tambahkan kode berikut di atas kode

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div> Ingat bahwa lowerbar#

adalah mengacu pada jumlah kolom. Jadi jika Anda ingin menambahkan kolom kelima maka cukup mengganti lowerbar# menjadi lowerbar5. Setelah Anda menambahkan kolom kelima maka ingatlah untuk mengubah width: 23%; menjadi width: 17%;. Anda ulangi langkah 3 untuk memperbanyak jumlah kolom yang Anda inginkan. Tapi 3, 4, dan 5 kolom itu adalah standar. Jika lebih dari itu maka akan terlihat jelek, jadi pertimbangkan itu. Semoga artikel ini bermanfaat bagi Anda dan jangan lupa untuk membagikan ini dengan teman-teman Anda jika Anda menyukainya. Terimakasih.

Read More
Subscribe to: Posts ( Atom )