Pasang Widget Floating Tombol/Button Share Social Media di setiap Postingan

Pasang Widget Floating Tombol/Button Share Social Media di setiap Postingan

Floating Button Share Sosial Media

Kalau sebelumnya proBlogiz membagi tutorial cara memasang  Tombol/Button Share Sosial Media Di Posting yang bertype bar button share, kali ini adalah cara memasang Floating Tombol/Button Share Sosial Media di setiap postingan. Floating button share jenis Mashable atau buton share mengambang / melayang ini terdiri dari tombol/button sosial terbaik seperti Facebook Share / Like, Twitter dan Google +1 ( 3 in 1 )

Floating button share  ini   murni menggunakan  CSS dan kode HTML dan sepenuhnya kompatibel dengan semua browser utama. Anda akan melihat widget ini nempel di kiri dari posting blog. Saya telah mencoba untuk membuat agar proses instalasi / pemasangan widget button share ini semudah mungkin agar mudah buat Anda dalam memahami dan membuat floating tombol/button share sosial media untuk keperluan blog Anda.

Langkah Pasang Widget Floating Tombol/Button Share Sosial Media di setiap Postingan

1. Masuk Blogger > Tata Letak

2. Pilih add HTML/JavaScript widget

3. Copy kode berikut dan pastekan semua dalam widget

<style> /*-------proBlogiz Sharing Widget------------*/ #floatdiv { position:fixed; bottom:15%; margin-left:-70px; z-index:10; float:left; padding-bottom:2px; } #mbtsidebar { background:#fff; border-top:1px solid #ddd; border-left:1px solid #ddd; border-bottom:1px solid #ddd; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding-left:5px; width:60px; margin:0 0 0 5px; } .fb_share_count_top {width:52px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-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="floatdiv"> <div id="mbtsidebar"> <table cellpadding="1px" cellspacing="0"> <tr> <td style="padding:5px 0px 0px 0;"> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="problogiz">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </td> </tr> <tr> <td style="padding:5px 0 2px 0;"> <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> </tr> <tr> <td style=" padding:5px 0px 0px 0px;"> <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script> <g:plusone size="Tall" expr:href="data:post.url"> </g:plusone></td> </tr> <tr> <td> <p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://problogiz.blogspot.com">Widgets</a></p> </td> </tr> </table> </div> </div>

Kostum :

Untuk menyelaraskan widget lebih ke kiri atau kanan edit nilai ini margin-left: 70px-; Semakin kecil nilai angka akan menggeser widget ke kanan dan semakin besar nilai akan bergeser ke kiri.Untuk mengubah warna latar belakang widget floating edit background: # fff;  

Gunakan generator warna HTML atau grafik warna untuk memilih warna.

4. Drag atau geser widget baru tersebut tepat dibawah post body, seperti gambar dibawah :

5. Save / Simpan

Sekarang bisa dilihat Floating share sudah menggantung di blog Anda.

Membuat agar widget floating share hanya tampil pada postingan saja

Untuk membuat agar widget floating share hanya tampil pada postingan saja, ikuti tutrial berikut :

1. Blogger > Template > Edit HTML

2. Backup template Anda

3. Check Expand Widgets Templates Box

4. Cari judul widget floating share Anda ( gunakan / tekan F3 )

    Sebelumnya beri judul sementara widget baru Anda, misalnya: "Floating Share"

5. Kode widgetnya kurang lebih seperti berikut dibawah ini :

<b:widget id='HTML7' locked='false' title='Floating Share'  type='HTML'>
<b:includable id='main'>
..............
</b:includable> </b:widget>

Setelah Anda menemukan kode seperti diatas (judul widget floating share) kemudian tambahkan dua kode berikut warna biru tepat di bawah atau antara teks berwarna kuning. Sebagai contoh jika Anda ingin menampilkan widget pada halaman postingan saja jadikan seperti ini kodenya :

<b:widget id='HTML7' locked='false' title='Floating Share'  type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
..............
</b:if>
</b:includable> </b:widget>

6. Save Template

    Sekarang widget floating share Anda hanya tampil di halaman postingan saja

Untuk penjelasan lengkap cara menampilkan dan menyembunyikan widget di Blogger baca artikel Tampilkan Widget Pada Halaman Tertentu

Selesai 

Salam, jika Anda suka artikel Pasang Widget Floating Tombol/Button Share ini monggo di-tweet saja atau di-like juga boleh....thank's bro

Membuat Auto Read More dengan Gambar Thumbnail

proBlogiz

---

Membuat Auto Read More dengan Gambar Thumbnail pada blogger tentu membuat blog Anda semakin mengagumkan dan lebih user friendly. Auto Read More juga dapat mengurangi beban loading time karena postingan hanya ditampilkan dalam ringkasan (summary post ) saja pada homepage / halaman utama dan diikuti link Read More dibawahnya untuk membawa ke postingan selengkapnya.

Pada tuorial Blogger proBlogiz yang lalu, saya telah membagi bagaimana cara memasang / membuat Read More Link pada Blogger, namun seperti Anda tahu membuat Read More link dengan metode itu bukanlah type Read More Otomatis ( Auto Read More Link ).

Dengan membuat Auto Read More, Anda tidak perlu lagi memasangnya secara manual setiap kali membuat atau publis posting baru / artikel baru. Dengan memasang/menambah beberapa kode script pada template ( hack script ) maka otomatis postingan di Homepage, Label page atau Archive page akan ditampilkan sebagai ringkasan pendek atau summary dengan dikuti gambar thumbnail ( image thumb ).

Ada banyak pilihan atau versi Auto Read More with Image Thumbnail - umumnya menggunakan hack scrpit, yang dapat Anda gunakan sesuai dengan karakter template blogger. Karena adanya perbedaan pada masing-masing blogger template ini, memungkinkan tidak semua auto read more script bekerja atau dapat diterapkan di blog Anda. Oleh karena itu pada tuorial Membuat Auto Read More dengan Gambar Thumbnail di Blogger ini, saya ingin membagi dalam beberapa versi , sehingga Anda mempunyai banyak opsi atau pilihan versi Auto Read More with Image Thumbnail yang sesuai dengan karakter blog Anda ( pilih yang dapat diterapkan dengan baik di blog Anda ) :

Membuat Auto Read More dengan Gambar Thumbnail versi 1 
Membuat Auto Read More dengan Gambar Thumbnail versi 2 
Membuat Auto Read More dengan Gambar Thumbnail versi 3

Catatan :

Untuk membuat Auto Read More yang baru di blog Anda, pertama-pertama Anda harus lihat (check ) kembali apakah blog Anda ( template yang sekarang ) sudah ada fungsi atau script Read More, jika ada maka Anda harus menghapusnya dahulu semua kode script Read More Link lama tersebut. Saya sarankan Anda mengikuti tutorialnya Cara Menghapus Read More/Auto Read More Link di Blogger

Baiklah, setelah  memastikan sudah tidak ada lagi  fungsi Read More di template, Anda bisa mengikuti langkah-langkah berikut untuk Membuat Auto Read More dengan Gambar Thumbnail pada blogger :

Membuat Auto Read More dengan Gambar Thumbnail versi 1

Membuat link Auto Read More versi 1 ini, cukup mudah dan banyak keuntungan yang dapat Anda dapatkan, selain javascript bersifat internal sehingga tidak perlu lagi memuat file .js eksternal yang diupload di hosting lain. Dan juga bila Anda menerapkan versi ini :

1. Anda tidak perlu lagi memasukkan opsi Line Break ( Insert Jump Break ) di setiap postingan baru Anda bahkan ototmatis fungsi read more akan berlaku pada postingan lama Anda.

2. Gambar pertama dari posting Anda akan dipilih untuk tampilan pada halaman utama blog Anda untuk postingan tersebut.

Langkah Pemasangan kode Auto Read More :

Masuk Blogger Dashboard > Template > edit HTML

Back up template dahulu > klik Download Full Template 

Check "Expand Widget Templates" box

Tekan Control + F > cari tag </head>

Copy code script berikut dan pastekan tepat diBAWAH tag </head>

<!-- Auto read more v 1 script Start --> <script type='text/javascript'> var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail summary_noimg = 430; //summary length when no image summary_img = 340; //summary length when with image img_thumb_height = 200; img_thumb_width = 200; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){     if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(thumbnail_mode == "yes") { if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script> <!-- Auto read more v 1 script End -->

Selanjutnya cari tag <data:post.body/>
Gantilah tag tersebut dengan kode berikut dibawah :

<!-- Auto read more v1 Start -->
<!-- http://problogiz.blogspot.com/ -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more v1 End -->

Sebelumnya klik Preview/Pratinjau dahulu jika tidak ada error message,
Kemudian Save Template

Kostumisasi 

var thumbnail_mode = "yes"; 

ini berarti mode ringkasan /summary dengan diikuti thumbnail gambar, jika di set " no " berarti hanya ditampilkan ringkasan teks saja.

summary_noimg = 430;

jumlah karakter tanpa thumbnail gambar, Anda bisa merubah angka sesuai keinginan

summary_img = 340;

jumlah karakter dengan thumbnail gambar, rubah angkanya sesuai keinginan

img_thumb_height = 200; img_thumb_width = 200;

adalah ukuran thumbnail gambar (dalam pixel). ubahlah sesuai dengan keinginan.

Ganti teks " Read more... " dengan teks Anda sendiri, mis : Selengkapnya >>, dll. 
Atau jika ingin menggantinya dengan gambar/image, ganti teks tersebut dengan kode berikut :

<img border='0' src='url gambar/image readmore'/>

Untuk membuat tampilan summary/paragraf ringkasan di hompage menjadi rata kiri kanan (justify), maka tambahkan saja kode  style='text-align:justify;' pada kode line tag yang berwarna merah sehingga mejadi seperti ini :

<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>

Jika tutorial cara membuat Auto Read More versi 1 ini, tidak berhasil dengan baik dengan template Anda, cobalah cara yang lain: Auto Read More versi 2 dan versi 3.

Atau jika tetap ingin menerapkanya versi ini, silahkan Anda bertanya di form komentar kalau ada masalah scrpit atau susah memasangnya....saya pasti membantu mencari solusinya buat Anda.

Just Enjoy it!!

Baca juga :  Membuat Read More Link di Blogger (Google Recomended) 

Cara Membuat Template Kosong ( Blank Template) di Blogspot

Cara Membuat Template Kosong ( Blank Template) di Blogspot

Blank Template atau template kosong!!...ya tutorial Blogger kali ini rada unik, entah ada yang membutuhkanya atau tidak..who knows?Blogger Blank Template kedengarannya memang aneh, karena template yang di-adopsi dari  Simple Blogger template ini benar-benar dibuat atau di-convert menjadi kosong, blank, polos, bersih tanpa widget apapun. Dari hasil utak-atik - ga da kerjaan :)- proBlogiz akhirnya menemukan cara membuat blank template pada Blogger (  ala proBlogiz )

Template Blogspot atau Blogger umumnya menggunakan code Type XHTML 1.0 Strict Document. Ini dikembangkan oleh konsorsium world wide web pada tanggal 26 Januari 2000. Tidak seperti PHP atau ASP.net aturan XML yang ketat dan tak kenal ampun. Sebuah kesalahan kecil saja pada proses coding akan direspon dengan pesan kesalahan atau peringatan keras, ini  sering Anda temui ketika mengedit template blog Anda. 

Saya akan berbagi kode sederhana yang akan mengubah struktur XML  menjadi blank template, polos kosong tanpa widget. Template blogger  terdiri dari widget yang dioperasikan dan dikelola dengan menggunakan nama class dan ID. 

Mari kita sedikit berepksperimen membuat halaman HTML kosong, sedikit keluar pakem untuk Template Blogger dan kemudian juga  mencoba menambahkan widget dengan cara-cara baru yang menarik untuk menyesuaikan tampilan blog.

Halaman atau HTML Page sederhana memiliki gambaran jenis dokumen yang diikuti oleh tag HTML, HEAD and BODY. Meta tag, JavaScripts dan style sheet selalu ditambahkan di dalam bagian HEAD dan  DIV section  dalam bagian BODY. Di Blogger karena template diprogram secara otomatis melalui bagian b:section tag  maka kita harus terlebih dahulu menghapus semua bagian tersebut dan meninggalkan hanya satu tag saja karena markup XML memerlukan kehadiran setidaknya satu tag pada bagian tersebut. Untuk lebih menyederhanakan proses saya telah menciptakan sebuah tema yaitu "Clean HTML Theme" sebagai contoh project ini. Anda dapat menggunakan tema ini atau template "Clean HTML Theme"  untuk bermain dan bereksperimen sendiri dengan mecoba beberapa tool menarik, Fancy CSS3 tweak, dan melatih keterampilan desain Anda. 

 Blank Blogger Template Template   >>>>>  DEMO

Langkah Membuat Blogger Blank Template ( "Clean HTML Theme" )

Masuk Blogger

Buat Blog Baru dan  Beri Nama dan Alamat ( test blog, coba blog - beri nama blog terserah Anda)

Pilih Simple Template ( Mudah ) bukan Dynamic Views

Selanjutnya pergi ke Template > Edit HTML 

Hapus semua kode dalam template editor dan ganti dengan kode berikut :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
   <b:skin><![CDATA[/*
-----------------------------------------------
////////////////////////CLEAN HTML THEME////////////////////////
///////////////////CODED BY : Riza-problogiz.blogspot.com///////////////////
///////////////////DOWNLOAD FROM: http://problogiz.blogspot.com  ///////////
----------------------------------------------- */
#navbar-iframe {   height:0px;   visibility:hidden;   display:none   }
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)  margin: 0;
    padding: 0;
}

]]></b:skin>
  
  </head>
  <body>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

<div style='margin-top:400px; '>
<!--Please keep the Credits intact-->
<center><p><a href='http://problogiz.blogspot.com'>proBlogiz Clean HTML </a>&#169; 2012.</p></center>
</div>
  </body>
</html>

Kemudian klik Save

Jika ada pesan seperti berikut :

Maka pilih Hapus Widget ( jangan pertahankan )

Selesai

Anda telah membuat Blank Template - well done

Yang Perlu Diperhatikan !!

1. Untuk membuat widget baru maka penempatan kode JavaScript harus berada antara <head> ....</head>

2. Untuk penempatan kode CSS harus berada antara <b:skin><![CDATA[/*......]]></b:skin>

3. Dan untuk perintah kode HTML akan berada antara <body>.....</body>

Sekarang coba Anda mengunjungi atau cek di bagian Tata Letak Blogger. Anda akan menemukan sebuah area kosong dengan hanya ada Widget Favicon saja. Jika Anda membuat sebuah posting baru atau halaman, mereka tidak akan muncul di blog Anda, karena memang tidak ada widget postingan pada blog ini.

So, mau mencoba membuat atau memasang Widget Posting sekarang ?

Untuk memberikan gambaran tentang bagaimana dengan mudahnya template blogger dapat dirancangdari awal hanya menambahkan kode berikut tepat di atas </ body> - sebagai contoh untuk membuatfungsi Pos Widget pada Tema Clean HTML Template ini

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section>

Save Template

Kemudian kunjungi halaman  Tata Letak Blogger sekali lagi. Anda akan dapat melihat Widget Pos dan kini Anda dapat dengan mudah mengedit pilihan format nya.  Selamat! Anda telah membuat satuwidget pertama Anda pada template blogger. Cobalah bereskperimen dengan cara ini dan tambahkan beberapa widget baru yang menarik dan mecoba mencari tahu sendiri seberapa kreatif Anda.

Selamat bermain-main dengan Clean HTML Template Anda