Tips Membuat Social Media Share Artikel Blogspot

Tips membuat dan memasang social media untuk share artikel di blogspot dengan mudah, simple dan works tenan. Ada banyak cara yang bisa kita gunakan untuk membuat social media share tersebut baik manual maupun otomatis. Social media share button adalah tombol-tombol yang digunakan untuk untuk berbagi artikel tertentu ke social media facebok, twitter, google+, linkedin, dll.

biar lebih menggigit, saya akan share 2 cara memasang social media share di blogspot baik manual maupun otomatis.

Kita mulai dari yang mudah dulu yah, dengan cara otomatis bisa dengan bantuan addthis dan sharethis, dalam post blog saya ini, saya pakai yang addthis. Caranya hampir sama kok, tinggal kunjungi situsnya, kemudian registrasi lengkapi form yang ada. kalo sudah sampai tahap instalasi tinggal copy scriptnya dan paste di blog agan.

Jika agan males untuk register, maka ikuti langkah berikut:

1. Pastikan sudah masuk ke akun blogspot anda, jika belum monggo login dulu. :)
2. Pilih menu "Template"
3. Pilih "Edit Template"
4. Cari kode <div class='post-footer-line post-footer-line-1'> 
5. Jika ada 2 script seperti no 5, maka pilih yang ke 2, yang berarti penempatan social media share ini berada dibawah artikel, (contohnya lihat di blog ini, dibawah artikel ini).
6. Kemdian, monggo copy script HTML dan Javascript dibawah ini, dan paste tepat dibawah kode <div class='post-footer-line post-footer-line-1'> 


7. <!-- Share button tipsntrickstenan.blogspot.com START -->
   <div class="addthis_toolbox addthis_default_style ">
   <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
   <a class="addthis_button_tweet"></a>
   <a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
   <a class="addthis_button_linkedin_counter"></a>
   <a class="addthis_counter addthis_pill_style"></a>
   </div>
   <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
   <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
   <!-- Share button tipsntrickstenan.blogspot.com END -->

Jika memilih cara manual, agan tinggal ambil plugin yang tersedia di situs developer social media yang diinginkan. Shortcutnya langsung saja ke Facebook Developer, Twitter Developer dan Google+ Developer. Setelah dapat scriptnya, kemudian ikuti langkah-langkah diatas jika ingin penempatan social media sharenya seperti blog ini, jika tidak agan mungkin bisa nyisipinnya setelah atau sebelum kode <data:post.body/> yang ke 2.

Demikian tips social media share kali ini, semoga bermanfaat. :)

› Read More

Tips Membuat Pagination Atau Page Number Blogspot

Tips membuat pagination atau page number blogspot yang mudah, simple, dan works tenan. sebelumnya, kita harus tahu dulu apa itu pagination atau page number? Pagination adalah istilah yang digunakan untuk membuat penomoran halaman blog atau website agar pengunjung lebih mudah mengekplorasi semua artikel di blog kita.

Kenapa blog atau web perlu dikasi page number? tentunya jika blog tidak diberi pagination maka, blog anda akan memanjang tanpa ada ujung, membuat pengunjung capek untuk menscroll sampai bawah, terus naik lagi, nanti kalo jari si pengunjung lecet, yang mau mijetin siapa? kesien kan.. :v.. oleh karena itu anda menggunakan blogspot, secara default paginationnya kan hanya menggunakan "Older Posts" dan "Newer Posts" saja, sangat tidak menggigit beuds kan?

jadi bagaimana jika tampilannya seperti ini:

pie, cuit cuit.. kueren beuds kan. :v tapi dari script yang saya share ini, tekstur tampilannya tidak seperti di atas, tapi fungsinya tetap sama kok, makanya dicoba dulu yah. :v kalo mau seperti diatas, bisa menggunakan UI kits atau dari CSS nya aja.

Ok, Begini langkah-langkahnya:

1. Pastikan sudah masuk ke akun blogspot anda, jika belum monggo login dulu. :)
2. Pilih menu "Template"
3. Pilih "Edit Template"
4. Cari kode ]]></b:skin>
5. Kalo sudah ketemu, monggo copy script CSS dibawah ini, dan paste tepat diatas kode ]]></b:skin>

1. .showpageArea a {
   text-decoration:underline;
   }
   .showpageNum a {
   text-decoration:none;
   border: 1px solid #ccc;
   margin:0 3px;
   padding:3px;
   }
   .showpageNum a:hover {
   border: 1px solid #ccc;
   background-color:#ddd;
   }
   .showpagePoint {
   color:#333;
   text-decoration:none;
   border: 1px solid #ccc;
   background: #ddd;
   margin:0 3px;
   padding:3px;
   }
   .showpageOf {
   text-decoration:none;
   padding:3px;
   margin: 0 3px 0 0;
   }
   .showpage a {
   text-decoration:none;
   border: 1px solid #ccc;
   padding:3px;
   }
   .showpage a:hover {
   text-decoration:none;
   }
   .showpageNum a:link,.showpage a:link {
   text-decoration:none;
   color:#333333;
   }

6. Setelah itu, cari kode </body>
7. Kalo sudah ketemu, copy kode javascript dibawah ini, dan pasti tepat diatas kode </body>

1. <!--Page Navigation Starts-->
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <script type='text/javascript'>
   var pageCount=7;
   var displayPageNum=7;
   var upPageWord =&#39;Previous&#39;;
   var downPageWord =&#39;Next&#39;;
   </script>
   <script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
   </b:if> </b:if>
   <!--Page Navigation Ends -->

8. Simpan perubahan yang dilakukan dengan klik "Save Template"

Demikian topik pagination ini, untuk menjadikan UI nya lebih menggigit, kembangkan kreativitasnya pada script CSS nya. semoga bermanfaat. :)

› Read More