Design, Tutorial and Tips Trik Blogger | Lostsector

- on 17.50

Design, Tutorial and Tips Trik Blogger | Lostsector

Cara Berlangganan / Mendapatkan Artikel Terbaru Sebuah Blog
Memasang Fitur Blogger Rating Stars Pada Postingan Blog
Cara Menampilkan Rating Bintang Pada Pencarian Search Engine
Floating Social Bookmark Horizontal Untuk Blogger
Cara Mengganti Nama Facebook Yang Sudah Tidak Bisa Diganti
Cara Membuat Status Kosong di Facebook
Membuat Tulisan Berwarna Biru di Facebook

Cara Berlangganan / Mendapatkan Artikel Terbaru Sebuah Blog

Posted: 13 Mar 2013 12:24 PM PDT

Tidak semua orang atau pengunjung setia sebuah blog atau website yang ia sukai tahu bagaimana caranya berlangganan atau mendapatkan artikel terbaru via email dan tidak banyak juga dari mereka sudah tahu, tetapi artikel-artikel terbaru yang ingin dia dapatkan ketika ada update-an terbaru tidak mereka dapatkan atau tidak terkirim ke dalam inbox email mereka.

Hal tersebut di atas kemungkinan besar dipengaruhi oleh beberapa faktor salah satu diantaranya karena kurangnya pemahaman tentang bagaimana cara berlangganan atau mendapatkan artikel terbaru. Nah, untuk itu sengaja saya buat artikel ini dengan tujuan agar mereka yang ingin mendapatkan update-an artikel yang ter-update atas blog/website yang mereka suka tidak terkecuali Lost-sector.net bisa mereka dapatkan.

Cara Berlangganan Artikel Terbaru

Hampir semua blog/website menyediakan sebuah sarana untuk memudahkan bagi para pengunjungnya mendapatkan artikel-artikel terbaru dengan cara menyediakan sebuah form subscription, baik itu form standard yang disediakan oleh Google Feedburner maupun yang sudah dimodifikasi sedemikan rupa sehingga tampak lebih menarik.

Nah, bagi anda yang ingin mendapatkan artikel terbaru dari web/blog yang menjadi favorite anda, ada baiknya anda memperhatikan langkah-langkah di bawah ini :

1. Cari form "Email Subscription" yang disediakan oleh web/blog tersebut (biasanya posisi email subsribe terdapat pada sidebar atau tepat di bawah postingan blog). Contohnya seperti pada gambar di bawah ini :

Cara Berlangganan / Mendapatkan Artikel Terbaru Sebuah Blog

Atau form yang berada di sidebar/widget

2. Setelah anda temukan form subscribenya, masukkan alamat email yang akan dikirimi pemberitahuan atas artikel terbaru kemudian tekan "Submit"

3. Jika tombol "Submit" sudah anda tekan, maka akan muncul sebuah popup atau jendela baru. Masukkan verifikasi kata dan lanjutkan dengan menekan "Complete Subscription Request"

4. Selanjutnya, buka email dan periksa inbox anda. Biasanya nama pengirimya adalah "FeedBurner Email Subscriptions <noreply+feedproxy@google.com>", kemudian buka email tersebut dan klik link konfirmasi yang disertakan di dalamnya.

5. Jika sudah di klik, maka pengiriman pemberitahuan artikel terbaru ke inbox email anda sudah aktif.

Recommended...!!!

Semoga membantu dan semoga bermanfaat. Terima kasih dan salam blogger...!!!

Memasang Fitur Blogger Rating Stars Pada Postingan Blog

Posted: 13 Mar 2013 09:41 AM PDT

Fitur Rating Stars Blogger adalah sebuah fitur resmi dari blogger yang bertujuan untuk memberikan kesempatan kepada pengunjung untuk melakukan penilaian terhadap isi artikel yang dibacanya serta memberikan evaluasi kepada author mengenai artikel yang telah dibuatnya. Fitur yang satu ini berbeda dengan "Cara Menampilkan Rating Bintang Pada Pencarian Search Engine" karena fitur ini hanya untuk menempatkan rating pada setiap postingan/artikel blogspot.

Ada dua cara pemasangan fitur rating ini, yang pertama dengan menambahkannya melalui layout/tata letak blog dan dengan melakukan pengeditan HTML. Perlu anda perhatikan, untuk cara pertama bisa anda lakukan jika anda menggunakan Template Official yang disediakan oleh blogger karena pada template official blogger didalamnya sudah terdapat script rating stars, tetapi bagi anda yang menggunakan Costum Template (Template Pihak Ketiga), anda harus melakukannya secara manual yakni dengan dengan melakukan pengeditan kode HTML blog atau bisa juga dengan mengakses / login ke draft.blogger.com.

Pemasangan Rating Stars Melalui Layout

Seperti yang anda telah ketahui bahwa untuk mengakses layout/tata letak, terlebih dahulu anda harus login ke blogger.com (bagi yang menggunakan Template official blogger) atau ke draft.blogger.com (bagi yang menggunakan costum template) kemudian pada menu dashboard pilih tata letak dan pada bagian body post tepatnya di sudut kanan bawah, pilih "Edit". Lihat gambar di bawah ini untuk lebih jelasnya :

Lanjutkan dengan memberi checklist/centang "Tampilkan Rating Bintang" dan klik tombol simpan.

Pada kasus di atas, posisi rating bintang tepat berada di bawah postingan dan jika langkah-langkah tersebut di atas sudah anda lakukan tetapi rating bintang masih belum muncul, maka saya sarankan untuk melakukan pengeditan HTML template dan berikut penjelasannya.

Pemasangan Rating Stars Melalui Edit HTML Tempate

Untuk pemasangan rating stars dengan melakukan pengeditan kode html, ada dua hal yang dibutuhkan, yakni JavaScript dan Kode HTML. Sebelum saya lanjutkan, terlebih dahulu saya ingin menekankan bahwa untuk menempatkan rating pada posisi yang anda inginkan, anda harus memperhatikan penempatan kode HTMLnya dan jangan sampai ada kesalahan karena jika terjadi kesalahan, maka rating tersebut tidak akan muncul atau bahkan tidak berada pada posisi yang anda inginkan.

1. JavaScript dan Penempatannya

Cari kode <b:include name='feedLinks'/> kemudian tempatkan Javasript di bawah ini tepat di bawahnya.

<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

Pada tahap ini, janga klik tombol simpan dulu tetapi lanjutkan dengan menempatkan kode HTML di bawah ini.

2. Kode HTML dan Penempatannya

Untuk menempatkan rating bintang tepat di bawah judul postingan, tempatkan kode HTML di bawah tepat dibawah tag <div class='post-header-line-1'/> namun jika anda ingin menempatkan rating bintang di bawah isi postingan/arikel, maka tempatkan kodenya tepat di bawah <data:post.body/>. Catatan : Gunakan Ctrl + F untuk mempermudah pencarian.

<div class='star-ratings' style='float:right;'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if></div>

Note : Kode yang saya beri tanda warna merah tersebut di atas adalah posisi rating tepatnya berada disebelah kanan, namun jika anda ingin menempatkannya disebelah kiri, anda tinggal menggantinya dengan kata "left".

Lanjutkan dengan menekan tombol simpan/save dan buka postingan anda untuk melihat hasilnya.

Need a Help ?

Jika anda memiliki kendala tentang tuturial pemasangan rating stars terebut di atas, silahkan anda meninggalkan komentar. Terima kasih dan salam blogger...!!!

Cara Menampilkan Rating Bintang Pada Pencarian Search Engine

Posted: 13 Mar 2013 09:38 AM PDT

Menampilkan rating bintang richsnippets pada search engine result page (SERP) merupakan sebuah daya tarik sendiri bagi para blogger, bagaimana tidak ketika seseorang melakukan sebuah pencarian pada search engine tiba-tiba pada halaman pertama muncul sebuah blog yang dibawahnya terdapat lima buah bintang disertai dengan foto profil google plus sehingga menarik perhatian orang tersebut untuk membuka link tersebut.

Cara pemasangan rating bintang ini ada dua macam, yang pertama pemasangan yang direkomendasikan oleh google dan yang kedua saya tidak tau siapa yang membuat dan menyebarkannya, namun pada kesempatan kali ini saya akan membahas tentang bagaimana cara memasang snippet rating star rekomendasi google.

Well, tanpa panjang lebar lagi, langsung aja yuk simak bagaimana cara pemasangan rating stars ini pada blog. Berikut caranya :

Login ke blogger dengan akun sobat
Pada menu Dashboard, pilih Template » Edit HTML dan centang "Expand Template Widget"
Untuk menghindari kekeliruan dalam pemasangannya, alangkah baiknya jika sobat membackup template terlebih dahulu
Copy kode di bawah ini dan pastekan tepat di bawah tag <head>

<link href="https://plus.google.com/108801075003252823592" rel="author"></link>

Keterangan :
Warna Biru ganti dengan ID Profil Google Plus yang sobat punya

Langkah selanjutnya, Copy dan paste kode di bawah ini tepat di bawah tag <body>

<div itemscope='' itemtype='http://data-vocabulary.org/Review'>

Dan masukkan kode penutup di bawah ini tepat di atas atas tag </body>

</div>

Selanjutnya, cari kode HTML yang kurang lebih seperti di bawah ini :

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

Jika sudah ketemu, tambahkan kode itempropnya sehingga akan tampak terlihat seperti di bawah ini :

<span itemprop='itemreviewed'><span itemprop='description'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</span></span>

Masih belum selesai sobat...!!! Langkah berikutnya, cari kode seperti di bawah ini :

<span class='fn'><data:post.author/></span>

Jika sudah dapat, tambahkan kode beberapa potong kode HTML sehingga hasilnya akan jadi seperti ini :

<span class='fn'><span itemprop='reviewer'><data:post.author/></span></span>

Lanjutkan lagi dengan penambahan ratingnya tepat sesudah kode </b:if> dan Jika disatukan maka hasilnya akan jadi seperti di bawah ini :

<span class='post-author vcard'>
    <b:if cond='data:top.showAuthor'>
        <data:top.authorLabel/>
          <span class='fn'><span itemprop='reviewer'><data:post.author/></span></span>
       </b:if>
    <span itemprop="rating">4.5</span>
</span>

Terakhir, simpan template sobat.

Dan untuk mengeceknya apakah langkah sobat yang lakukan sudah benar atau tidak, silahkan cek di webmaster tools richsnippets (tools ini juga untuk mengecek Peringatan : Missing Required Field "Updated") Kalau berhasil, maka reviewnya akan terlihat seperti gambar di bawah ini.

Klik untuk memperbesar gambarnya

NOTE :
Pemasangan rating bintang richsnippets ini sendiri memerlukan waktu bagi mesin pencari untuk mencrawl dan menampilkannya pada halaman mereka.

Sampai disini ada pertanyaan? kalau ada, silahkan memberikan komentar di bawah. Insya Allah saya akan menjawab pertanyaan yang sobat ajukan sesuai kemampuan dan pengetahuan saya. Terima kasih dan salam bloggers...!!!

Floating Social Bookmark Horizontal Untuk Blogger

Posted: 13 Mar 2013 09:44 AM PDT

Setelah beberapa waktu yang lalu saya sempat membuat sebuah postingan mengenai Floating Social Bookmarking Vertical Untuk Blogger, pada kesempatan kali ini saya kembali membuat sebuah postingan yang hampir sama dengan postingan saya yang lalu, tetapi bedanya adalah floating yang berbentuk Horizontal.

Untuk Floating Social Bookmarking Horizontal ini yakni berada tepat di bawah judul postingan dan jika pembaca melakukan Scrolling, maka secara otomatis akan tetap muncul dan akan menghilang atau pada saat scroll pada badan postingan berakhir. Nah, untuk lebih jelasnya, perhatikan gambar di bawah ini :

Floating Social Bookmark Horizontal Untuk Blogger

Dari gambar di atas sudah jelas terlihat bahwa Floating Social Bookmarking Horizontal dilengkapi berbagai jenis Social Bookmark yang populer seperti Tombol Facebook, Google Plus, Twitter, Pinterest, Digg dan lain sebagainya.

Jika anda tertarik untuk menggunakan Floating Social Bookmark di atas, berikut langkah-langkah pemasangan beserta Javascript, CSS dan HTML yang diperlukan.

Langkah pertama, yakni login ke Blogger Terlebih dahulu
Copy CSS dan JavaScript di bawah ini kemudian pastekan tepat di atas tag </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>

/*<![CDATA[*/

#lscSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}

#lscSocialFloat td{padding:4px;margin:0;border:none;}

#lscSocialFloat td iframe{max-width:82px;width:82px !important;}

#lscSocialFloat.lscFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}

/*]]>*/

</style>

<script type='text/javascript'>

/*<![CDATA[*/

// Set the Top Offset

$theOffset = 0;

jQuery(document).ready(function(b){var a=b("#lscSocialFloat");a.wrap('<div id="lscSocialPlaceholder"></div>').closest("#lscSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#lscSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("lscFloatSocial"):a.removeClass("lscFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});

/*]]>*/

</script>

<script src='http://mbl-flipper-google-blogger.googlecode.com/files/mbl_blogger_pinit.js' type='text/javascript'/>

<script type='text/javascript'>

/*<![CDATA[*/

// Twitter

(function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");

// Google + (plus)

(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();

// Stumbleupon

(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();

// Digg

(function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();

/*]]>*/

</script>

</b:if>

Note : Perhatikan jQuery yang saya beri tanda dengan warna Merah di atas, jika di dalam template anda sudah terdapat jQuery dengan versi terbaru, maka anda tidak usah mengcopy dan memasukkannya kedalam template, cukup CSS dan JS saja yang saya beri warna biru saja.

Langkah selanjutnya, copy kode HTML di bawah dan pastekan di atas atau di bawah tag <data:post.body/>

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

<div class='lscSocialFloat' id='lscSocialFloat'>

<table class='lscSocialFloat' width='100%'>

<tr>

<td>

<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>

</td>

<td>

<iframe allowTransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>

</td>

<td>

<div class='w2bPinitButton' expr:id='"w2bPinit-" + data:post.id' style='display: none;visibility: hidden;height: 0;width:0;overflow: hidden;'>

<data:post.body/>

<script type='text/javascript'>

w2bPinItButton({

url:"<data:post.url/>",

thumb: "<data:post.thumbnailUrl/>",

id: "<data:post.id/>",

defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmly2HGlXTQJNjlS5FF166QZVjn8HwPeXVUGbTmTvV4S7r4PdglCktcUwlBnXfkkbPP5pfCyWOGTZJDNhyphenhyphen0QpNrmycKj3tpagG-fauuFLmVE9nnPcchXN_ahAsEs4ikvXJpTL_GL7yfxwv/s1600/w2b-no-thumbnail.jpg",

pincount: "horizontal"

});

</script>

</div>

</td>

<td>

<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>

</td>

<td>

<su:badge expr:location='data:post.url' layout='1'/>

</td>

<td>

<a class='DiggThisButton DiggCompact'/>

</td>

</tr>

</table>

</div>

</b:if>

Terakhir Simpan Template dan lihat hasilnya.

Selamat Mencoba dan Semoga Tidak Bermanfaat [Hehehe]. Terima kasih dan salam Bloggers...!!!

Cara Mengganti Nama Facebook Yang Sudah Tidak Bisa Diganti

Posted: 13 Mar 2013 10:31 AM PDT

Memang bisa mengganti nama akun (account) facebook yang sudah melebihi batas penggantian nama...??? Ah masa iya...???

Yup, jawabannya bisa... Pada umumnya penggantian nama akun facebook hanya bisa dilakukan beberapa kali saja sehingga pada waktu batas penggantian nama tersebut sudah sampai pada batasnya, maka penggantian nama tersebut sudah tidak bisa lagi..

Cara Mengganti Nama Facebook Yang Sudah Tidak Bisa Diganti

Nah, pada kesempatan kali ini saya akan menjelaskan bagaimana caranya mengganti Nama Akun Facebook yang sudah melebihi batas penggantian nama alias sudah tidak bisa diganti lagi....

Perhatikan langkah-langkahnya :

Login ke Facebook
Pilih pengaturan dan ganti nama dengan nama yang tersedia atau yang sudah pernah digunakan sebelumnya.
Selanjutnya sobat klik link http://www.facebook.com/hacked/
Setelah terbuka, ikuti perintah-perintah yang disediakan
Selanjutnya pada bagian Review setting sobat akan diberi kesempatan untuk mengganti namanya.
Pilihlah nama yang cocok, setelah itu simpan dan lanjutkan.
Selesai

Semoga Bermanfaat buat sobat...

Cara Membuat Status Kosong di Facebook

Posted: 13 Mar 2013 10:30 AM PDT

Selamat siang sobat....!!! Pada kesempatan sebelumnya, saya sudah membahas tentang Cara menginvate/mengundang teman facebook ke Gruop, Memasang Tombol Subscribers di Blog, Membuat Tulisan Berwarna Biru di Facebook dan pada Kali ini saya akan membahas tentang bagaimana cara meng-update Status Kosong di Facebook....

Nah, langkah untuk meng-update status kosong di facebook sangatlah mudah, sobat tinggal mengcopy kode di bawah dan pastekan di form update status dan kemudian tekan kirim...

@[0:0: ]

Gimana sobat, gampang bukan??

Semoga bermanfaat dan jangan lupa like blog ini ya... hehehe

Membuat Tulisan Berwarna Biru di Facebook

Posted: 13 Mar 2013 10:27 AM PDT

Update status di Facebook sudah menjadi hal yang paling disenangi oleh para Facebookers di seluruh dunia, tapi update status dengan warna tulisan itu-itu saja terkadang sangatlah membosankan...

Dan pada kesempatan kali ini saya akan menjelaskan bagaimana cara membuat update status di facebook tersebut menjadi berwarna biru...

Membuat Tulisan Berwarna Biru di Facebook

Tekan CTRL + C secara bersamaan dan copy kode dibawah ini :

@@[1:[299412296830430:1: Ganti Teks Ini Dengan Status Kamu ]]

Dan pastekan di tempat kamu membuat status tersebut (Tekan CTRL + V) dan kemudian kirim dan lihat hasilnya. Tulisan berwarna merah, silahkan sobat ganti dengan Status Sobat..

Atau jika cara diatas tidak berhasil, silahakan update status DISINI

This posting includes an audio/video/photo media file: Download Now