Rabu, 30 Januari 2013

Tutorial Membuat Kotak Komentar Facebook dan Blog Berdampingan

Membuat Kotak Komentar Facebook dan Blog Berdampingan-Tutorial ini saya share kepada Anda setelah saya aplikasikan tutorial ini di beberapa blog saya yang lain. Menurut saya penting saya share karena ini berguna. Ya, walaupun sudah banyak blogger lain telah membuat postingan sejenis dengan ini.

Membuat kotak komentar Facebook (FB) dan blog berdampingan adalah tutorial yang mudah. Saya mau bercerita sedikit tentang pentingnya kotak komentar facebook hadir di blog Anda. Semoga dengan cerita atau penjelasan saya dapat membuat Anda berpikir lagi untuk menambahkannya juga dalam blog Anda. Hehehe.

Kotak komentar facebook dalam blog adalah sebenarnya opsi dari sekian banyak opsi yang Anda dapat pilih dalam hal memperbaiki penampilan blog Anda atau bisa meningkatkan kunjungan blog Anda. Kalau saya pikir, dan sesuai dengan pengalaman pribadi, kotak komentar facebook yang terpasang pada sebuah blog dapat meningkatkan antusiasme, umpan balik pengunjung Anda terhadap topik yang Anda bahas pada blog Anda.

Kotak komentar ini akan terasa banyak sekali manfaatnya jika blog Anda termasuk blog yang berisi tentang materi konsultasi, tutorial, dan yang sejenisnya karena bukan tidak mungkin pengunjung blog Anda kurang mengerti atau ingin mengajukan pertanyaan terkait materi yang Anda posting di blog Anda. Berkomentar di kotak komentar facebook kelihatannya sangat mudah dan persentase umpan baliknya yang dilakukan oleh pengunjung blog Anda lebih tinggi daripada Anda sekedar memasang kotak komentar blog di blog Anda. Ini juga tidak lepas karena faktor, hampir semua orang yang on line (di Indonesia) juga membuka account facebook.

Terlebih lagi, saya kira share atau penyebaran materi yang Anda sampaikan dalam blog Anda semakin cepat, mudah dan luas tersebar dikarenakan selain menyediakan kotak komentar facebook, di sini juga tersedia fasilitas untuk "meng-like" komentar-komentar terpilih. Anda tahu sendirikan, kalau pengunjung blog Anda me-like artikel atau komentar tertentu dalam blog Anda maka secara tidak langsung link-link postingan Anda akan terposting dalam account facebook pengunjung blog. Anda mungkin bisa bayangkan berapa potensi pengunjung baru untuk blog Anda dengan memperhitungkan banyaknya yang berkomentar, memberikan like, dan kunjungan secara tidak langsung dari teman atau kenalan pengunjung blog Anda.

Okey, tanpa berteleh-teleh lagi. Berikut Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan :

1. Seperti biasa, Login ke account blogger Anda

2. Klik Rancangan lalu klik Edit HTML

3. Download template Anda dulu untuk berjaga-jaga jika nanti terjadi kesalahan

4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget

5. Jika sudah, cari kode  ]]></b:skin>  (gunakan ctrl + f untuk mempermudah pencarian)

6. Kalau sudah dapat maka masukkan kode berikut ini di atas kode ]]></b:skin>

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px;
cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

Catatan : 
Anda dapat mengubah warna tampilan kotak komentar Anda dengan mengutak-atik kode HTML di atas. Anda dapat mengubah warna backround sesuai dengan kehendak Anda.

7. Kemudian Anda cari kode </head>

8. Jika sudah dapat, masukkan kode berikut ini tepat diatas kode </head>

    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='ID FB Anda disini' property='fb:admins'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
    $(".comments-tab").addClass("inactive-select-tab");
    $(selectTab).removeClass("inactive-select-tab");
    $(".comments-page").hide();
    $(selectTab + "-page").show();
    }
Perhatikan tulisan yang berwarna merah di atas, ganti dengan ID facebook Anda, misalkan https://www.facebook.com/nama Anda, maka ID Anda berada pada tulisan yang berwana biru. 
9. Kemudian cari kode  <div class='comments' id='comments'>

Keterangan:  Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini dibawah kode
<div class='comments' id='comments'> yang pertama dan kedua (tidak apa-apa, sejauh ini belum ada efek yang merugikan).

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='2' width='500'/>
    </b:if>
    </div>

<span style='font-size: 85%'>Widget Comment <a href='http://bloggermahir.blogspot.com/2013/01/kotak-komentar-facebook-dan-blog-berdampingan.html' rel='follow' target='_blank'>FB-Blog </a></span>
    <div class='comments comments-page' id='blogger-comments-page'>



Perhatikan angka yang berwarna merah dan kuning diatas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Anda dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Anda agar kelihatan rapi. Dan perhatikan pula kode yang berwarna merah, jika penempatan kode dibawah <div class='comments' id='comments'> yang kedua terdapat kode yang sama, maka hapus salah satu kode tersebut.

contoh :

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<div class='comments comments-page' id='blogger-comments-page'>
( hapus salah satu)


10. Kemudian klik save, dan lihat hasilnya.

Semoga berhasil dan Bermanfaat....!

Kamis, 17 Januari 2013

Membuat Tombol Facebook, Twitter, Google Plus Melayang di Samping

Membuat Tombol Facebook, Twitter, Google Plus Melayang di Samping-Mungkin agak lama saya membaut postingan baru. Ini tidak lepas karena banyaknya juga rutinitas di dunia nyata. Hehehe. Tidak selamanya hidup berada di dunia maya, dunia nyata juga butuh perhatian.

Membuat Tombol Facebook, Twitter, Google Plus Melayang di Samping, adalah judul dari postingan saya yang ingin saya share kepada Anda. Ya, walaupun saya tahu ini postingan atau tutorial yang sudah umum Anda dapatkan di blog-blog yang sejenis dengan blog saya, tetapi bagi yang belum tahu caranya buat hal demikian dapat membantu Anda, minimal Anda tahu dan juga mau share kepada yang lain. Hehehe.

Menurut saya, tombol share atau like facebook di blog itu penting, juga tidak kalah penting dengan tombol share ke twitter, tombol follow atau mengikuti di Account Google Plus tambahan lain seperti di StumbelUpon dan Digg, ini penting agar menambah pengunjung bagi blog Anda. Anda dapat membayangkan sendiri, jika postingan Anda banyak yang like dan share di berbagai macam social media, berapa kira-kira pengunjung baru terhadap postingan blog Anda.

Berkut saya sajikan buat Anda tutorial blog bagaimana cara membuat tombol facebook, twitter, Google plus, StumbleUpon dan Digg melayang di samping blog Anda. Mirip dengan punya saya di bloggermahir.

1. Seperti biasa, Anda log in dulu lah ke blog Anda.
2. Setelah masuk, langsung tuju saja bagian Tata Letak
3. Tambahkan Gadget (di bagian apa saja), kemudian tambah HTML/Javascript
4. Copy kode HTML berikut :
<!--SideBar Floating Share Buttons Code Start-->
<style>

#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;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;-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="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://bloggermahir.blogspot.com/2013/01/membuat-tombol-like-facebook-twitter-google-plus-melayang-disamping-blog.html">Get This</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div></div>

5. Jika sudah, klik Save, kmudian lihat dulu di pratinjau untuk melihat, apakah tutorial ini berhasil Anda lakukan.

Simpel dan mudahkan, semoga bermanfaat dan berhasil.

Selasa, 18 Desember 2012

Tips Optimasi (SEO) Blog dengan Link External

tips-seo-tautan-keluar
Tips Optimasi (SEO) Blog dengan Link External-Belajar dari pengalaman adalah guru yang terbaik, tetapi belajar dari pengalaman dan kesalahan orang lain adalah guru yang paling bijaksana.

Pada kesempatan ini saya ingin share tips kepada Anda mengenai "Tips Optimasi (SEO) Blog dengan Link External".
Membuat tautan atau linik antar blog atau antar halaman blog kita adalah salah satu cara atau tips yang banyak dilakukan oleh para blogger untuk meningkatkan optimasi mesin pencari (SEO) untuk blognya.
Tips saya kali ini terkait dengan tautan atau link adalah jangan terlalu banyak menautkan / memberikan tautan (link) kepada ke situs eksternal. Ini prioritas Rendah. Ya, walaupun ini prioritas rendah, tetapi patut juga Anda perhatikan, alasannya :



Menghubungkan ke situs yang tidak terkait di situs Anda adalah ide yang baik, tetapi jangan mengisi halaman Anda dengan mereka. Paling-paling, Anda akan melemahkan efektivitas halaman Anda di mesin pencari, dan yang paling buruk halaman Anda akan terlihat seperti daftar link dan sedikit informasi dikenakan sanksi oleh mesin pencari. Juga, ketika Anda memiliki banyak link eksternal, Anda memiliki lebih untuk memeriksa secara berkala, untuk memastikan bahwa halaman tersebut tidak menjadi link rusak.

Mohon Perhatian

Terima kasih atas kunjungan Anda di mahir blogger. Hubungi kami jika Anda menemukan konten/postingan
yang rusak/tidak terbaca. Silahkan beritahu kami dengan menulis pesan
pada kotak komentar. Kami akan berusaha menanggapi dan memperbaiki konten
tersebut secepatnya. Saran, kritik, dan komentar Anda sangat berharga buat kami. Terima Kasih, Contact on : mahirblogger@gmail.com.

Senin, 10 Desember 2012

Tips Mencari & Memilih Keyword yang Sesuai

mencari-memilih-keyword
Mencari & Memilih Keyword yang Sesuai-Sahabat bloggermahir, mungkin ini postingan yang sudah sangat klasik. Mencari dan Memilih Keyword yang sesuai agar nantinya jumlah pengunjung blog Anda dapat maksimal.


Memang tidak bisa dipungkiri bahwa, dari sekian banyak diantara para blogger memang yang tidak memperhatikan masalah ini, namun sebagai seorang yang ingin mengoptimalkan fungsi pencarian search engine terhadap blog kita, ada baiknya mulai dari sekarang Anda perhatikan mengenai keyword yang sedang Anda ingin bidik. Ya dengan menetapkan keyword pada blog Anda setidaknya "mengaharuskan" Anda untuk tetap fokus dan konsisten dengan isi blog Anda. Penetapan keyword pada blog Anda membantu Anda, agar postingan atau artikel-artikel yang Anda posting nantinya tidak meluber kemana-mana, menyerempet semua permasalahan, ngalor-ngidul.



Beberapa tips mencari dan memilih keyword yang "sesuai". Saya sengaja menonjolkan kata sesuai, maksudnya di sini ingin menekankan bagaimana keyword yang baik, penetapan, bidikan keyword yang bagus dapat memberikan umpan balik positif kepada traffic atau pengunjung. Saya tidak mau membandingkan dengan keyword yang saya gunakan di blog ini, "Ya, saya mengaku bahwa saya banyak melakukan kesalahan di saat saya ingin menetapkan keyword pada blog ini", cuman yang ingin saya share sebenarnya adalah apa refleksi kesalahan saya kemudian semoga Anda dapat pelajaran di sana agar tidak mengulangi kesalahan apa yang saya lakukan, atau mengambil positif dari apa yang saya tetapkan.

Langkah-langkah Mencari & Memilih Keyword yang Sesuai :

1. Ambil Pensil/Pulpen dan kertas, kemudian Anda tuliskan keyword apa yang Anda ingi tetapkan di blog Anda.

2. Tuliskan sebanyak-banyaknya, keyword apa pun itu. Usahakan jangan lakukan dulu analisa terhadap pilihan yang Anda tuliskan.

3. Setelah Anda menuliskan list keyword yang Anda ingi tetapkan pada blog Anda (fokus tulisan), lakukan seleksi.

4. Seleksi dari kumpulan  keyword yang Anda ingin tetapkan menjadi 3 atau 4 keyword saja. Kerucutkan pilihan.

5. Lakukan seleksi dengan selektif mungkin, di sinilah perlunya analisa mendalam dan tentunya perlu  survei.

6. Survei dan seleksi keyword Anda dengan menggunakan alat atau tool berikut :
      Google Trends : http://www.google.co.id/trends/
      Google Keyword Tool : https://adwords.google.com/o/Targeting/Explorer
       Wordtracker  : https://freekeywords.wordtracker.com/
Saya kira 3 tool atau alat pencari/analisa survei di atas sudah bisa memberikan gambaran buat Anda.

7. Setelah Anda telah melihat/menganalisa atau membandingkan keyword-keyword yang Anda pilih, maka Anda berputar ke belakang lagi (maksudnya : ke langkah satu) untuk mencari keyword lain yang mungkin saja banyak pencarian di sana.

8. Setelah itu, tetapkanlah keyword Anda, dan bekerjalah dengan sebaik-baiknya terhadap keyword yang telah pilih. Posting artikel yang sesuai dengan keyword Anda.

Beberapa tips lain dalam Mencari dan Memilih Keyword :

1. Lihat, apakah keyword yang Anda bidik termasuk keyword abadi atau keyword musiman.

2. Sarannya adalah keyword abadi yang Anda tetapkan atau bidik.

3. Keyword musiman dapat Anda juga bidik tapi ini membutuhkan kerja keras untu terus mencari keyword musiman selanjutnya

4. Analogi keyword abadi seperti pelari marathon, sedangkan analogi keyword musiman seperti pelari cepat/sprinter.

5. Keyword abadi memberikan traffic yang terus menerus tapi mungkin pencarian dalam sehari tidak terlalu banyak, statis sepanjang tahun. Sedangkan keyword musiman membuat kunjungan blog Anda tiba-tiba naik dan suatu saat tiba-tiba menurun seiring menurunnya popularitas dari keyword musiman yang Anda bidik.

Contoh keyword abadi : Resep masakan, cara menjaga kesehatan, dll.

Contoh Keyword musiman : gosip artis si A..., skandal Korupsi pejabat B...., dll.

Okey, mungkin itu sedikit tips yang sempat saya share seputar masalah pencarian dan pemilihan keyword untuk blog Anda.

Semoga manfaat buat Anda.

Salam bloggermahir....!

Mohon Perhatian

Terima kasih atas kunjungan Anda di mahir blogger. Hubungi kami jika Anda menemukan konten/postingan
yang rusak/tidak terbaca. Silahkan beritahu kami dengan menulis pesan
pada kotak komentar. Kami akan berusaha menanggapi dan memperbaiki konten
tersebut secepatnya. Saran, kritik, dan komentar Anda sangat berharga buat kami. Terima Kasih, Contact on : mahirblogger@gmail.com.

Kamis, 06 Desember 2012

Dahsyat dengan Tutorial Membuat Box Fans Page di Blogger

fans page facebook
Tutorial Membuat Box Fans Page di Blogger-Tutorial blog kali ini yang ingin saya sajikan, share kepada Anda semua yaitu "Tutorial Membuat Box Fans Page di Blogger". 
Perkembangan dunia social media memang semakin meningkat peminatnya maupun penggunanya. Banyak social media pun berevolusi dan beradaptasi dengan cepat, memenuhi bahkan mendapat peluang pasar. Salah satu mungkin yang saya dapat sebutkan adalah Box Fans Page Facebook pada Blog. Seperti yang telah saya buat pada di bagian samping.
Nah, apa urgensinya fans page ini ? Ini mungkin bisa dikatakan salah media promosi yang cukup efektif. Dengan membuat fans page di blog Anda, maka setiap kali Anda up date Artikel maka secara otomatis terjadi pemberitahuan otomatis pada facebook-facebook penggemar Anda. Memang kedengarannya sepele, tetapi jikalau saja kita mau berhitung-hitung, misalnya di dalam fans page facebook di blog Anda terdapat penggemar sebanyak 1000 orang, setiap 1000 orang tersebut mendapat pemberitahuan bahwa Anda sedang mengupdate artikel Anda, dari 1000 orang tersebut yang membuka link postingan Anda hanya sekitar 10% atau 100 orang, maka Anda dalam seketika tersebut kedatangan pengunjung sebanyak 100 orang. Dahsyatkan...!




Tutorial blog ini saya buat karena saya yakin ini akan berguna bagi Anda ke depannya. Apalagi bagi mereka yang sedang mempromosikan blognya untuk menggait penjualan produk atau jasa.

Bagaiamana cara membuatnya...? Berikut tutorial blognya.

1. Log in dulu ke Account Facebook Anda. Silahkan ke sini : www.facebook.com

2. Setelah itu Anda langsung menuju ke sini http://www.facebook.com/pages/create.php untuk membuat halaman facebook.

3. Setelah Anda masuk ke halaman tersebut maka akan ditampilkan gambar atau pilihan kurang lebih seperti di bawah ini :
fan-page-facebook-like

4. Silahkan Anda pilih sesuai dengan kebutuhan Anda. Anda dapat memilih :
Local Business or Place
Company, Oraganization, or Institution
Brand or Product
......
and Community
Karena kita ingin membuat sebuah komunitas, contoh komunitas fans page like Blogger Mahir . Maka, kita pilih Community.

Klik pilihan, kemudian isikan sesuai dengan nama komunitas yang Anda ingin buat. Centang I Agree kemudian klik Get Started

5. Set Up dulu Page Community, Tambahkan Foto Profil. Kemudian pada langkah dua, isikan tentang Community Anda dan alamat linik yang bisa di akses, blog, twitter, dll.
Jika Anda ingin mengabaikan dulu, klik saja Skip.
fan-page-facebook-like

6. Setelah itu Anda menuju tampilan Halaman/Page yang sudah Anda buat. Tampilannya mungkin akan seperti di bawah ini, tapi ini tampilan yang sudah ada sebelumnya.
fan-page-facebook-like

Perhatikan bagian yang saya bundari Merah. Copy link tersebut, bisa Anda simpan dulu di Notepad.

7. Selanjutnya silahkan menuju halaman berikut : 

8. Setelah itu masukkan alamat Fans Page yang telah Anda copy di Notepad pada bagian Facebook Page URL, seperti pada gambar di bawah ini :
fan-page-facebook-like
Width : untuk menentukan lebar Box Fans Page yang Anda ingin buat
Height : menentukan tinggi Box
Show Face: menampilkan foto profil yang menyukai Page Anda
........
Header : menampilkan atau tidak bagian Header dari Box yang Anda buat

Setelah itu, klik Get Code, untuk mendapatkan kode HTML yang nantinya harus Anda pasang di Blog Anda.

9. Tampilannnya yang Anda dapat akan seperti berikut :
fan-page-facebook-like
Kode HTML paling atas, masukkan di blog Anda. Pergi ke bagian Template blog Anda kemudian Edit HTML, centang Expand, kemudian cari kode <body>, letakkan kode di dalam box di bagian bawah kode <body>. Klik Simpan

Sedangkan kode HTML pada kotak Kedua, letakkan pada bagian Tata Letak blog Anda. Tambah Gadget kemudian cari HTML/Javascript.

10. Klik Pratinjau untuk melihat hasilnya. Jika berhasil klik Simpan

Semoga tutorial blog ini bermanfaat buat Anda

Jangan Lupa, untuk sertakan sumber/source asli tutorial blog ini jika Anda ingin mengambilnya

Mohon Perhatian

Terima kasih atas kunjungan Anda di mahir blogger. Hubungi kami jika Anda menemukan konten/postingan
yang rusak/tidak terbaca. Silahkan beritahu kami dengan menulis pesan
pada kotak komentar. Kami akan berusaha menanggapi dan memperbaiki konten
tersebut secepatnya. Saran, kritik, dan komentar Anda sangat berharga buat kami. Terima Kasih, Contact on : mahirblogger@gmail.com.

Sabtu, 01 Desember 2012

Cara Membuat Widget Melayang di Blogger

cara-membuat-widget-melayang
Cara Membuat Widget Melayang di Blogger-Biasanya untuk menarik perhatian pengunjung banyak dilakukan oleh para blogger atau webmaster handal. Banyak cara dan macam yang dilakukan, yang paling umum adalah membuat kenampakan teks atau widget tertentu kontras dengan yang lainnya, seperti penggunaan bold atau huruf miring (italic) pada kalimat tertentu, ada yang membuat text area (ingin tahu membuat text area, silahkan baca tutorial blog saya : Cara Membuat Text Area), membuat teks berkedip (cara membuatnya, baca tutorial blog berikiut : Cara Membuat Teks Berkedip), dan ada pula yang membuat teks berjalan (ingin tahu, baca lagi di sini : Cara membuat Teks Berjalan).
Tutorial Blog-Ya, namanya juga usaha. Usaha agar bagian terpenting yang mau kita tonjolkan dalam wb/blog kita dapat dilihat atau diperhatiakn oleh para pengunjung. Nah, pada kesempatan ini saya ingin share kepada Anda bagaimana "Cara membuat Widget Melayang di Blogger". Ya, walaupun ini tutorial yang sudah agak lama dikenal oleh para blogger, tapi saya reposting kembali dengan redaksi berbeda agar punya variasi.



Widget melayang adalah bagian tertentu (widget di dalam blog entah itu widget iklan, widget facebook like, widget follow twitter, bahkan widget iklan, hehehe :).
Lantas bagaimana, cara membuat widget melayang di blog Anda. Nah, berikut tutorialnya :
1. Log ini ke account blogger Anda. Langsung saja ke sini www.blogger.com
2. Lanjut ke bagian Tata Letak
3. Ke bagian Tambah Gadget (jika Anda ingin menambah gadget baru), tapi kalau mau edit Gadget yang sudah terpasang dan ingin membuatnya menjadi melayang atau floating, maka silahkan pilih salah satu HTML/Javascript kemudian klik edit.
4. Kemudian Copy kode HTML berikut :

<style type="text/css"> #gb{ position:fixed; top:10px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:left;margin-left:220px; border:0px solid #000000; background:#eeeeee; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <div style="text-align:right"> <a href="javascript:showHideGB()"> .:[Close][Klik 2x]:. </a> </div> <center>Masukkan kode HTML widget widget iklan, widget facebook like, widget follow twitter, bahkan widget iklan</center> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>

Beberapa catatan Penting buat Anda :
  • Widget ini saya sudah setting untuk berada di sebelah kiri, untuk modifikasi Anda dapat mengubahnya dengan mengubah bagian yang sudah saya tandai kuning, dari tadinya left menjadi right (untuk widget melayang sebelah kanan).
  • Warna border saya setting jadi warna merah, untuk mengubahnya silahkan ubah kode warna di bagian yang sudah saya tandai orange solid #000000, sesuai dengan warna kesukaan Anda. Kode warnanya dapat Anda cari sendiri di Google , hehehe.
  • Backgroud dapat Anda rubah sesuai dengan kehendak Anda sendiri, modifikasi dengan mengubah bagian yang sudah saya tandai biru. Kode warna cari di google., hehehe
  •  Pada bagian warna merah, silahkan Anda masukkan kode HTML apa saja yang mau Anda buat melayang. Bisa kode iklan.
  • Widget melayang yang saya posting, di klik 2 kali baru keluar.
 5. Klik simpan, Kemudian Pratinjau untuk melihat apakah tutorial blog ini berhasil.

6. Setelah berhasil, klik simpan.

Okey, itulah tutorial blog yang sempat saya posting pada kesempatan ini. Semoga berhasil diperaktekkan, dan bermanfaat buat Anda. 

Seperti biasa, selalu masukkan kode HTML berikut jika Anda ingin mengambil postingan sebagai referensi atau mengcopy, sertakan selalu sumber dimana Anda mengambilnya :


Mohon Perhatian

Terima kasih atas kunjungan Anda di mahir blogger. Hubungi kami jika Anda menemukan konten/postingan
yang rusak/tidak terbaca. Silahkan beritahu kami dengan menulis pesan
pada kotak komentar. Kami akan berusaha menanggapi dan memperbaiki konten
tersebut secepatnya. Saran, kritik, dan komentar Anda sangat berharga buat kami. Terima Kasih, Contact on : mahirblogger@gmail.com.

Senin, 26 November 2012

Tutorial Membuat Breadcrumbs di Blogspot

Tutorial-Membuat-Breadcrumbs-di-Blogspot
Tutorial Membuat Breadcrumbs di Blogspot
Tutorial Membuat Breadcrumbs di Blogspot-Pada postingan sebelumnya saya sudah menjelaskan sedikit mengenai breadcrumbs "Mengenal Breadcrumbs dan Fungsinya dalam SEO". Pada postingan tersebut saya berusaha agar Anda dapat mengerti dengan breadcrumbs itu sendiri dan fungsinya.



Cara Membuat Breadcrumbs-Nah, pada postingan kali ini tugas saya untuk menjelaskan bagaimana cara membuat atau tutorial membuuat breadcrumbs. Sedikit info blog mungkin buat Anda : Breadcrumbs ini berfungsi di saat Anda telah memberikan label pada masing-masing postingan blog Anda. Label : Pengkategorian blog Anda sesuai dengan isi dan maksudnya. Seperti pada postingan saya ini, saya beri label tutorial blog.


Tutorial blog cara Membuat Breadcrumbs pada Blogspot
Anda log in dulu lah, ke account blog Anda, kemudian langsung kemudian langsung ke bagian Template, kemudian Edit HTML
Seperti biasa, lakukan dulu lah download Template, Cadangkan/Pulihkan > Unduh Template Lengkap. Ini tidak lain untuk antisipasi. Tapi, saya sudah berulang kali mencoba tutorial ini. Semoga Anda juga berhasil.

Kemudian cari kode berikut : (Seperti biasa, gunakan Ctrl + F, untuk memudahkan pencarian).
]]></b:skin>

Setelah Anda menemukannya, letakkan kode berikut ini tepat di atasnya :
.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

Setelah itu, Anda cari lagi kode HTML berikut :
<b:includable id='main' var='top'>

Okey mantap, Anda teruskan lagi langkah berikutnya. Hapus kode HTML di atas kemudian ganti dengan kode berikut : (agak cukup banyak gantinya).
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Nah, setelah itu selesailah prosesi "Cara Membuat Breadcrumbs" ini. Simpan Template Anda. Kemudian, cek pada salah postingan Anda, apakah tutorial blog ini berhasil. Okey.
Sekian dulu tutorial blog dari saya pada kesempatan ini, semoga Anda dapat mengaplikasikan "Tutorial Membuat Breadcrumbs di Blogspot" ke dalam blog Anda sendiri.

Mohon Perhatian

Terima kasih atas kunjungan Anda di mahir blogger. Hubungi kami jika Anda menemukan konten/postingan
yang rusak/tidak terbaca. Silahkan beritahu kami dengan menulis pesan
pada kotak komentar. Kami akan berusaha menanggapi dan memperbaiki konten
tersebut secepatnya. Saran, kritik, dan komentar Anda sangat berharga buat kami. Terima Kasih, Contact on : mahirblogger@gmail.com.

Selasa, 13 November 2012

Mengenal Breadcrumbs dan Fungsinya dalam SEO

Info Blog-Mahir blogger pada kesempatan atau postingan kali ini akan memberikan informasi mengenai dunia blog. Info blog ini walaupun kelihatannya sudah banyak yang memposting, tapi sebenarnya dalam postingan saya semuanya adalah pengalaman pribadi saya. Maksudnya, apa yang saya posting dalam blog saya adalah sesuatu yang menjadi pertanyaan saya. Jadi, ini sekedar share atas apa yang saya tidak ketahui dalam dunia blogging, kemudian saya tuangkan kembali dalam bentuk postingan seperti ini jika saya sudah tahu jawabannya. Lihat saja, hampir semua tutorial blog saya yang saya posting, saya juga aplikasi ke dalam blog ini. Maklum, saya juga masih newbie, blogger pemula.

Mengenal Breadcrumbs. Breadcrumbs adalah sebuah navigasi pada blog yang biasanya memberikan informasi kepada pengunjung blog, dimana posisinya sekarang. Maksudnya, posisi atau letak postingan yang mereka baca. Sedangkan definisi yang dibuat oleh Wikipedia seperti ini "Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces", semoga Anda mengerti artinya. Breadcrumbs merupakan gambaran bagi siapa saja yang ingin memperhatikan bahwa sebuah blog atau website yang terpasang breadcrumbs adalah seperti akar atau tangga yang bertingkat-tingkat. Biasanya tingkat tertinggi adalah home/beranda dari blog atau website itu sendiri. Contohnya seperti pada gambar di bawah ini:
breadcrumbs adalah dan fungsinya
Ya, ketika Anda melihat gambar di atas. Dengan mudah mungkin dapat memberikan pengertian sendiri mengenai breadcrumbs ini. Lihat kembali strukturnya, You are here: Home / Music / Listen, jadi jelas bukan kalau breadcrumbs sebenarnya adalah seperti struktur tangga atau akar dalam sebuah pohon. Listen mewakili serabut akar paling halus, kemudian membesar ke Music (bisanya menunjukkan label postingan), kemudian berakhir pada pangkal akar itu sendiri atau Home (tampilan muka/beranda dari blog atau website). Untuk lebih jelasnya, breadcrumbs mungkin juga dapat dikatakan struktur file dalam sebuah blog. Mirip struktur file dalam sebuah file di dalam komputer.
breadcrumbs adalah dan fungsinya

Jadi, sudah jelas ya pengertian dari breadcrumbs itu. Semoga Anda paham dari definisi breadcrumbs yang baru saya paparkan. Kemudian, lanjut ke permasalahan kedua. Apa fungsi dari breadcrumbs ini ? Terus apakah breadcrumbs berguna dalam SEO (Search Engine Optimization) sebuah blog. Berikut penjelasan saya mengenai manfaat atau fungsi breadcrumbs. Breadcrumbs berfungsi untuk :
  1. Memberikan kemudahan navigasi bagi pengunjung blog atau website
  2. Breadcrumbs berfungsi untuk membantu untuk memberikan orientasi, menunjukkan jalan kepada mereka para pengunjuing blog Anda untuk mengetahui lokasi dimana postingan mereka baca.
  3. Link atau tatutan yang ada di breadcrumbs membantu para pengunjung blog Anda dengan cepat untuk kembali ke halaman awal meraka kunjugi atau setidaknya kembali ke beranda / home blog atau website Anda.
Lantas, adakah fungsi atau manfaat breadcrumbs dalam hal SEO blog Anda. Berikut info yang saya dapat terkait manfaat breadcrumbs untuk SEO.
  1. Keyword Density-breadcrumbs menambahkan keyword atau kata kunci yang Anda fokuskan bangun dalam halaman blog Anda, building desinty.
  2. Untuk index halaman oleh Google. Dalam pencarian google, biasanya si mesin pencari ini juga menyertakan navigasi blog yang sedang di cari, atau bisa dikatakan bahwa google juga mengindex navigasi terkait keyword yang Anda isikan dalam kotak pencariannya. Contoh, mungkin yang bisa menjelaskan hal ini adalah ketika saya menuliskan di kotak pencarian google "berita wanita", atau "info wanita", maka dalam salah satu hasil pencariannya terlihat seperti berikut ini (blog yang menerapkan breadcrumbs untuk blognya).
breadcrumbs adalah dan fungsinya

Jadi, untuk SEO (Optimasi mesin Pencari) ini dengan breadcrumbs, banyak keyword atau kata kunci yang dapat diindex oleh google dalam blog Anda.

Mungkin, itu yang bisa saya share kepada Anda mengenai pengertian breadcrumbs, bagaimana manfaat dan fungsi breadcrumbs, hingga sedikit saya serempet mengenai manfaat breadcrumbs untuk SEO. Itu yang dapat saya share pada kesempatan ini. Berikut adalah postingan yang terkait dengan postingan ini, info blog :
1. Seberapa cepat loading blog Anda ?
2. Pengenalan Singkat HTML
3. Hal yang Membuat blog kurang Pengunjung
4. Mengenal Template SEO Friendly
5. Pengertian Parse HTML

Seperti aturan biasa, jika Anda ingin menyimpan postingan ini atau yang lebih "ingin meng-copy", mohon selalu sertakan link dari postingan ini :

Mohon Perhatian

Terima kasih atas kunjungan Anda di mahir blogger. Hubungi kami jika Anda menemukan konten/postingan
yang rusak/tidak terbaca. Silahkan beritahu kami dengan menulis pesan
pada kotak komentar. Kami akan berusaha menanggapi dan memperbaiki konten
tersebut secepatnya. Saran, kritik, dan komentar Anda sangat berharga buat kami. Terima Kasih, Contact on : mahirblogger@gmail.com.

Jumat, 09 November 2012

Traffic Tinggi dengan Widget Ping Gratis dan Otomatis

widget-gratis-ping-blog
Promosi Blog-Traffic tinggi sekali lagi adalah dambaan bagi para blogger. Memang, sedikit menjadi sebuah kebanggaan tersendiri mungkin jikalau hasil karya kita banyak yang meminati. Termasuk dalam hal ini adalah postingan blog kita, bangga jikalau postingan blog kita banyak yang kunjungi, apresiasi, dan lain-lain.
Widget Ping Gratis. Pada postingan saya kembali ingin share kepada Anda betapa pentingnya ping pada saat Anda sedang update artikel atau postingan. Ya, walaupun sebelumnya saya telah menyerempet masalah ini dalam postingan blog saya yang berjudul "Cara Jitu Promosi Blog". Di sana saya bahas sedikit mengenai ping.
Ping Otomatis. Kembali mungkin saya ingin mengingatkan bahwa ping sebenarnya adalah jalan termudah untuk Anda mendapatkan traffic atau pengunjung blog yang tinggi. Ya, bolehlah dikatakan teknik ping secara berkala adalah langkah lain dari berbagai macam cara untuk promosi blog. Ping adalah langkah tercepat untuk memberitahukan kepada search engine bahwa Anda sedang atau telah mengadakan update terbaru konten atau postingan pada blog Anda. Kabar baiknya, bahwa para search engine besar seperti pada Bing.com dan google.com sangat menyukai fresh content atau postingan yang dianggap baru. Postingan yang dianggap baru serta unik akan mendapat posisi yang tinggi dalam index mereka.
Ping Otomatis. Untuk melakukan ping adalah perkara yang mudah. Mungkin, untuk hal ini tidak perlu saya buatkan postingan baru lagi untuk proses tutorial blog-nya dalam melakukan ping ini. Cukup Anda menuju ke alamat layanan ping blog yang banyak tersedia, kemudian masukkan alamat URL blog Anda atau alamat feed Anda kemudian lakukan ping atau langkah lain sesuai dengan layanan-layanan masing-masing penyedia layanan ping.
Info Blog. Sebenarnya blogger mahir dalam content atau postingan yang dibuatnya terdapat variasi isi postingan. Memang sebagian besar adalah membahas postingan blogger tutorial atau tutorial blogger tetapi juga terdapat variasi diantaranya info-info blog, maupun tips dan trik blog. Traffic Tinggi dengan Widget Ping Gratis dan Otomatis, berisi kedua hal tersebut info blog sekaligus tips dan trik blog. Triknya yang akan saya sajikan yaitu, bahwa Anda tidak perlu capek-capek lagi untuk mengunjungi alamat layanan ping otomatis. Ping secara otomatis dapat Anda lakukan tanpa mengunjugi dan mencopy paste alamat blog ataupun alamat feed blog pada layanan ping tersebut, cukup dengan mengklik tombol widget ping yang nantinya akan Anda pasang di blog Anda.
Widget pertama saya dapatkan dari situs www.auto-ping.com, Anda dapat kunjugi tetapi jika Anda to do pint saja. Langsung saja copy paste kode HTML di bawah ini yang notabene juga berasal dari situs auto-ping.com.

Tampilan logo dari layanan auto-ping.com :
widget-auto-ping-bloggermahir
Widget yang kedua, sebenarnya hampir sama. Cuman saya berikan alternatif buat Anda. Yang mana yang mau dipilih dan diletakkan di blog Anda. Kalau saya pribadi, semuanya bagus. Widget ini berasal dari situs ping-fast.com, berikut adalah kode HTML-nya yang dapat Anda copy dan letakkan di blog Anda. Silahkan:
Tampilan awal dari website penyedia layanan ini seperti pada gambar di bawah:
widget-ping-blog
Untuk layanan ping lain seperti melalui pingomatic atau melalui pingoat adalah sudah memadai jika Anda lakukan ping pada salah satu dari kedua layanan tadi. Tips-nya sih, jangan terlalu banyak ping. Bisa-bisa Anda dikatakan sedang melakukan upaya spam dari mesin pencari. Lakukan ping hanya satu pada satu layanan ping saja untuk satu postingan atau artikel.

Promosi blog. Mungkin itu saja yang dapat saya share pada kesempatan kali ini. Beberapa artikel yang dapat bac mungkin :
1. Cara Jitu Promosi Blog
2. Tool Parse HTML
3. Tutorial blog cara membuat Text Area

Mohon Perhatian

Terima kasih atas kunjungan Anda di mahir blogger. Hubungi kami jika Anda menemukan konten/postingan
yang rusak/tidak terbaca. Silahkan beritahu kami dengan menulis pesan
pada kotak komentar. Kami akan berusaha menanggapi dan memperbaiki konten
tersebut secepatnya. Saran, kritik, dan komentar Anda sangat berharga buat kami. Terima Kasih, Contact on : mahirblogger@gmail.com.

Rabu, 24 Oktober 2012

Tutorial Mengganti Icon Blogger dengan Icon Sendiri

Tutorial Blog-Perkembangan dunia blog begitu dinamis, sedinamis banyaknya sumber-sumber informasi yang ada di internet. Begitu pun dengan Tutorial blog, begitu banyak sekali sebenarnya tutorial blog yang tidak sempat saya share di blog ini karena keterbatasan waktu dan kesempatan.
Tutorial blog. Mahir Blogger pada kesempatan ingin memberikan sebuah tutorial blog bagaimana cara mengganti Icon Blogger dengan Icon yang sesuai dengan keinginan Anda. Icon Blogger atau ada juga yang menyebutnya sebagai favicon, dapat Anda ganti dengan icon atau desain logo yang sesuai dengan keinginan Anda.
Info Blog. Ada yang tahu apa sebenarnya favicon ? Favicon adalah Icon untuk suatu web yang terletak di samping adressbar. Untuk icon standar dari blogger akan seperti pada gambar di bawah ini :
tutorial-mengganti-icon-blogger
Tutorial blog. Icon seperti inilah yang menjadi kode atau icon default atau umum pada blog yang Anda jika Anda belum mengganti iconnya. Nah, tutorial blog berikut semoga menjadi cara yang mudah dan aplikatif buat Anda dalam mengganti icon blog default-standar dengan icon atau logo yang sesuai dengan Anda. Berikut Tutorial blognya, ikuti step per step :
  • Menyiapkan memang gambar atau icon yang mau di pakai.

  • Kemudian, Anda upload icon modifikasi buatan Anda kepada layanan upload gambar. Rekomendasi saya sih di Photobucket. Belum daftar photobucket silahkan di sini.
  • Tapi, jika Anda sudah punya Account, silahkan lanjut ke langkah selanjutnya. Ambil atau copy alamat URL Icon Anda yang sudah Anda upload di Photobucket.
  • Contoh URL gambar dari Photobucket : http://i1055.photobucket.com/albums/s509/indrafatih/cobalagiblogmahir.png
  • Okey, selanjutnya kita beralih ke tahap tutorial selanjutnya. Anda log in dulu ke Accoalunt Blog Anda.
  • Kemudian menuju ke Template > Edit HTML > Expand Template Widget
  • Kemudian saling dan copy alamat link gambar atau icon Anda pada <link href=' url icon yang Anda sudah modifikasi' rel='shortcut icon'/>
  • Jadi hasilnya nanti akan seperti ini :  <link href='http://i1055.photobucket.com/albums/s509/indrafatih/cobalagiblogmahir.png' rel='shortcut icon'/>
  • Letakkan kode tersebut di atas </head> dan atau di bawah kode HTML <head>. Peletakkannya fleksibel, yang terpenting diantara kode <head> dengan </head>
  • Okey, sebelum menyimpan. Klik dulu Prantinjau untuk mengetahui apakah tutorial blog ini Anda lakukan dengan benar.
  • Jika sudah, klik Simpan atau Save.
Tutorial Blog. Itulah tadi langkah-langkah dalam mengganti Icon Default-Standar dari Blogger. Semoga Tutorial blog saya dapat Anda mengerti dan aplikasikan.

Tutorial blog. Anda telah membaca Tutorial Mengganti Icon Blogger dengan Icon Sendiri dari Blogger mahir. Seperti biasa, jika Anda ingin mengambil postingan kami sebagai referensi jangan lupa untuk selalu menampilkan alamat URL dari postingan kami ini.

Tutorial Blog. Berikut beberapa postingan yang kami rekomnendasikan buat Anda :
1. Tutorial Menambahkan Tombol Twitter pada Blog 
2. Tutorial Membuat Teks Area (Lengkap)
3. Tutorial membuat Translate Tool Bergambar
4. Dan masih banyak lagi, di sini
Mohon Perhatian

Terima kasih atas kunjungan Anda di mahir blogger. Hubungi kami jika Anda menemukan konten/postingan
yang rusak/tidak terbaca. Silahkan beritahu kami dengan menulis pesan
pada kotak komentar. Kami akan berusaha menanggapi dan memperbaiki konten
tersebut secepatnya. Saran, kritik, dan komentar Anda sangat berharga buat kami. Terima Kasih, Contact on : mahirblogger@gmail.com.

Minggu, 14 Oktober 2012

Tutorial Menambahkan Tombol Twitter pada Blog

tutorial-blog-add-widget-twitter
Tutorial Blog-Beberapa waktu ini saya baru kembali membuat postingan. Ya, maklum karena ada juga kesibukan di dunia off line. Tutorial blog yang ingin saya share kepada Anda kali ini adalah tutorial blog tentang bagaimana cara menambahkan widget Twitter atau Tombol Twitter pada blog Anda.
Tutorial blog ini sebenarnya, bukan sekedar tombol Tweet saja di blog Anda, tetapi dengan menggunakan widget ini, di blog Anda nantinya akan mencakup juga Tombol Like Facebook, tombol Share dengan beberapa platform social media, hingga pengunjung on line yang sedang nonkrong di blog Anda.
Info blog ini mungkin dapat Anda lihat aslinya dengan melihat langsung pada bagian bawah blog saya. Di situ Anda akan melihat widget yang saya maksud. Bagaimana cara membuatnya ? Tutorial nya bagaimana? Simak penjelasan saya satu persatu..!
1. Pertama, Anda menuju dulu ke situs berikut http://wibiya.conduit.com/
2. Bila Anda sudah masuk ke situ ini, maka tampilan seperti berikut :
tutorial-blog-tambah-tombol-twitter
Tampilan Wibiya
3. Klik tombol Join, pada bagian kiri atas. Sudah terlihat tidak...? Hehehe.
4. Setelah itu, Anda akan menemukan tampilan seperti berikut :
tutorial-blog-tambah-tombol-twitter
5. Masukkan Url Blog Anda, kemudian pilih yang sesuai dengan blog atau website Anda.
6. Klik Tombol Create Now
7. Tampilan berikutnya, akan seperti ini :
8. Tandai, aplikasi yang ingin tampil di blog Anda. Karena ini adalah tutorial bagaimana cara menambahkan widget Twitter, makan jangan lupa centang pada bagian Tweet Button, Anda juga dapat memilih aplikasi yang lain.



9. Tutorial selanjutnya, masukkan alamat email atau alamat gmail Anda, masukkan password yang sesuai dengan keinginan Anda, kemudian Bar Languange yang sesuai dengan bahasa yang Anda inginkan. Catatan : disini belum ada layanan untuk bahasa Indonesia, makanya Anda bisa menggunakan Bahasa Inggris/ English.
10. Tutorial selanjutnya, Anda tekan tombol Get Your Bar, atau seperti gambar di bawah ini.
tutorial-blog-tambah-tombol-twitter


11. Langkah selanjutnya, maka Anda akan menuju ke halaman yang seperti in, di dalam gambar tersedia layanan untuk paltform blog wordpress, untuk beralih ke blogger, klik tulisan here pada bagian bawah gambar Install on Wordpress.
12. Maka Anda akan beralih ke tampilan berikut : Klik gambar Blogger atau apa pun itu yang sesuai dengan platform dari blog yang Anda gunakan.
tutorial-blog-tambah-tombol-twitter
13. Selanjutnya, Anda diminta untuk menginstall Widet Wibar dalam Blogger
14. Klik here pada bagian bawah Install Wibar, untuk me-redirect atau mengarahkan Anda ke pengaturan blog Anda (Tapi Ingat, Anda harus log in dulu ke blogger.com). Setelah itu Anda akan diarahkan menuju halaman seperti di bawah ini untuk menambah elemen halaman pada blog Anda. Klik Menambah Widget: 
 15. Langkah Terakhir, Save atau Simpan untuk eksekusi setelah sebelumnya Anda menekan tombol Pratinjau untuk melihat Apakah Tutorial blog ini Anda lakukan dengan benar. Okey.
Jika Anda ingin mengambil postingan ini sebagai referensi, mohon sertakan selalu link-nya. Seperti di bawah ini :


Okey, itulah tadi Tutorial blog, bagaimana menambahkan widget Twitter pada blog Anda. Semoga Anda dapat mengerti tutorial saya, dan dapat bermanfaat. Terima Kasih.
Khusus buat Anda, beberapa Tutorial blog yang saya rekomendasikan buat Anda :
Mohon Perhatian

Terima kasih atas kunjungan Anda di mahir blogger. Hubungi kami jika Anda menemukan konten/postingan
yang rusak/tidak terbaca. Silahkan beritahu kami dengan menulis pesan
pada kotak komentar. Kami akan berusaha menanggapi dan memperbaiki konten
tersebut secepatnya. Saran, kritik, dan komentar Anda sangat berharga buat kami. Terima Kasih, Contact on : mahirblogger@gmail.com.