2 Membuat read more otomatis

Read more, bagi para blogger yang sudah proffesional pasti sudah tau cara membuat kode read more otomatis ini. tetapi bagi blogger yang baru belajar atau baru tau dunia internet pasti sangat kesulitan cara membuat kode read more otomatis. sebetulnya cara membuat read more otomatis ini sangatlah mudah sobat tetapi harus lebih teliti pada penempatan kodenya, jika salah pasti akan eror sobat. jadi usahakan jangan salah menaruh kode read more otomatis ini yah :). Sebelumnya kode read more otomatis ini untuk halaman yang menggunakan blogspot saja, untuk drupal,wordpress,dll cari saja di google atau saya akan membahas di next article :D hehe (insyaallah) doakan saja untuk bisa buat artikel lagi yah.

Cara membuat read more otomatis, silahkan disimak sobat.

• Langkah pertama Login ke blogspot.com
• Lalu masuk ke Template
• Edit HTML
• Centang Expand template widget
• Cari kode </head> untuk lebih mudah tekan F3 atau CTRL+F
• Pastekan kode ini dibawah kode </Head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://softripgamehosting.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

• Selanjutnya cari kode <data:post:body> ( Gunakan F3 supaya lebih cepat ) Jika anda menumukan 2 kode yang sama pilih kode yang pertama
• Jika sudah ketemu ganti kode itu dengan kode dibawah ini 

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<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>

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

• Simpan template dan lihat hasilnya :)

Keterangan :

• Summary_noimg :  Jumlah kata  Artikel tanpa gambar 
• Summary_img : Jumlah kata Artikel berisi gambar 
• img_thumb_height : Ukuran tinggi gambar
• Img_thumb_weight : Ukuran lebar gamabar

Semoaga artikel membuat read more otomatis ini membantu anda :)

0 Widget Mashable Style untuk Blogger

Widget Mashable Style untuk Blogger ini adalah widget populer yang dibuat oleh mashable.com. memang style widget ini sangat bagus karna mengumpulkan semua widget seperti Facebook Like box,     Twitter follow button, Subsribe Email, Dan Google Plus. pasti menarik tampilanya sobat, dan widget ini sangat disenangi para semua blogger karna tamplinya yang dinamis dan simple sekali.
Screenshoot :

Cara membuat : 

• Pertama tama silahkan Login ke blogger anda masing masing
• Selanjutnya masuk ke Tata letak dan tambah gadget, Pilih HTML/Javascript
• Kalau sudah Copykan kode dibawah ini

<style> /* Social Widget */ #B-mashable-bar { border: 0; margin-bottom: 10px; margin: 0 auto; width:300px; } .fb-likebox { background: #fff; padding: 10px 10px 0 10px; border: 1px solid #D8E6EB; margin-top: -2px; border-bottom:0; } .googleplus { background: #fff; border-right: 1px solid #D8E6EB; border-left: 1px solid #D8E6EB; border-image: initial; font-size: .90em; font-family: "Arial","Helvetica",sans-serif; color: #000; padding: 9px 11px; line-height: 1px;} .googleplus span { color: #000; font-size: 11px; position: absolute; display:inline-block; margin: 9px 80px;} .g-plusone { float: left;} .twitter { background: #fff; padding: 5px; border: 1px solid #C7DBE2; border-top: 0;} #mashable { background: #EBEBEB; border: 1px solid #CCC; border-top: 1px solid white; padding: 2px 8px 2px 3px; text-align: right; border-image: initial;} #mashable .author-credit {} #mashable .author-credit a { font-size: 10px; font-weight: bold; text-shadow: 1px 1px white; color: #1E598E; text-decoration:none;} #email-news-subscribe .email-box{ padding: 5px 10px; font-family: "Arial","Helvetica",sans-serif; border-top: 0; border-right: 1px solid #C7DBE2; border-left: 1px solid #C7DBE2; border-image: initial; height:35px;} #email-news-subscribe .email-box input.email{ background:#FFFFFF; border: 1px solid #dedede; color: #999; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border-image: initial; font-family: "Arial","Helvetica",sans-serif;} #email-news-subscribe .email-box input.email:focus{color:#333} #email-news-subscribe .email-box input.subscribe{ background: #ff9b00; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #cc7c00; color:white; text-shadow:#d08d00 1px 1px 0; padding:5px 14px; margin-left:3px; font-weight:bold; font-size:12px; cursor:pointer; border-image: initial;} #email-news-subscribe .email-box input.subscribe:hover{ backfround: #ff9b00; -moz-box-shadow:0 0 3px #999; -webkit-box-shadow:0 0 3px #999; box-shadow:0 0 3px #999; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #cc7c00; color:#FFFFFF; text-shadow:#d08d00 1px 1px 0} #other-social-bar { background-color: #D8E6EB; box-shadow: 0 1px 1px #FFFFFF inset; padding: 0px; font-family: "Arial","Helvetica",sans-serif; font-weight:bold; overflow: hidden; border: 1px solid #B6D0DA; height:30px; } #other-social-bar ul {list-style: none outside none; padding-left: 4px;} #other-social-bar .other-follow { float: left; color:#1E598E; overflow: hidden; height:20px; padding:5px; width: 260px;} #other-social-bar .other-follow ul { list-style: none outside none; padding-left: 4px;} #other-social-bar .other-follow ul li { font-size: 12px; font-weight: bold; display:inline; border:0; text-shadow: 1px 1px white;} #other-social-bar .other-follow ul li a { font-size: 12px; color:#1E598E; font-weight: bold; display:inline; text-shadow: 1px 1px white;} #other-social-bar .other-follow li { font-size: 12px; font-weight: bold; display:inline; border:0; text-shadow: 1px 1px white;} #other-social-bar .other-follow li a { font-size: 12px; color:#1E598E; font-weight: bold; display:inline; text-shadow: 1px 1px white;} #other-social-bar .other-follow li.my-rss { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvbncPaR_z0ZEgA7C4stWVpLovOP1nFA2vKTRCLLKRx3RJn3qM30J4jVRHjOA7rn49J5rRk1cmPJFnsstcRVMt2oAsF1N5s0Q0GJNnSX-npMatlHHRffF5JwM6SyucNMJ-dWoXTRvB-bo/s400/rss-16x16.png') no-repeat transparent; line-height: 1; padding: 0px 3px 1px 20px; width: 60px; margin-bottom:0px; margin-left:5px;} #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-linkedin a, #other-social-bar .other-follow li.my-gplus a{ text-decoration:none; } #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-linkedin a:hover, #other-social-bar .other-follow li.my-gplus a:hover{ text-decoration:underline; } #other-social-bar .other-follow li.my-fb { background: url ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIwDIVKs3R1NL2np-EG62BMGt1lbTceWrBpFErSgYOxDXaEP4heh76suCI6O4eUF22sG8hZkc81nafoHxZoWSO3QvvfiOWsR8NEtrxHZqagchLDO1sgyFvvS4OXoy5D-_7nkAzAxmrxqQ/s400/facebook.png') no-repeat transparent; line-height: 1; padding: 0px 3px 1px 20px; width: 60px; margin-bottom:0px;} #other-social-bar .other-follow li.my-gplus { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYKOlYS8wMS4aUf0mDVDijfrheMZXMcXbyvhnqV8AgzUswdFHbTRDStM5AwE70FQuSQ-XsAPdAAUeb5BUrIwSMfmQovUQUzf3ke14IFsJXFzRBs78QDkZQgG0mP5BeN8GWZV2ViPI555o/s400/gplus-16x16.png) no-repeat transparent; line-height: 1; width: 60px; padding: 0px 3px 1px 20px; margin-bottom:0px;} </style> <!--[if IE]> <style> #email-news-subscribe .email-box input.subscribe{ background: #FFCA00; } </style> <![endif]--> <div style="margin-bottom:1px;"> <div id="B-mashable-bar" > <!-- Begin Widget --> <div class="fb-likebox"> <!-- Facebook --> <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script> <script type="text/javascript">FB.init("");</script> <fb:fan profile_id="282864185058662" stream="0" connections="18" width="300px" height="170px" header="0" logobar="0" css="http://script-bamz-us.googlecode.com/files/facebook.js"></fb:fan> </div> <div class="googleplus"> <!-- Google --> <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div> <div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351& align=&button=blue&id=twitter_tweet_button_0& lang=en&link_color=&screen_name=USERNAME TWITTER&show_count=& show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div> <div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=RSS ANDA', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" style="width: 160px; font-size: 12px+" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if (this.value==')this.value=this.defaultValue;" /> <input type="hidden" value="BamzUs" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div> <div id="other-social-bar"> <!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/Rss ANDA" target="_blank">RSS Feed</a> </li> <li class="my-fb"> <a rel="nofollow" title="FB" rel="author" href="http://www.facebook.com/ID FACEBOOK ANDA" target="_blank">Facebook</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Goofle Plus" rel="publisher" href="http://plus.google.com/ID GOOGLE PLUS" target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.SOFTRIPGAME.blogspot.com" target="_blank" >Tutorial Bloggerr</a></span></div></div> <!-- End Widget --> </div>

Widget ini lebarnya 300px sobat , sobat bisa menggantinya dengan sesuka hati kalian. semoga bermanfaat widget Mashable ini
Script source : Bamz.us