Download WorkMag Premium Blogger Template Gratis

 

Pada postingan kali ini saya akan kembali membagikan template gratis untuk blog berplatform blogger , dipostingan yang sebelumnya saya juga sudah membagikan iNews 2014 Blogger Template. Dan hari ini akan saya share template yang keren khususnya untuk yang suka sekali dengan template yang responsive, ringan, dan seo friendly. 

WorkMag itulah namanya, template ini kaya akan fitur-fitur menarik, salah satunya adalah Costum Page Error 404 (tampilan untuk jika ada halaman yang tidak ditemukan) dan ads / iklan banner sudah ready atau siap dipasang. 

Fitur Template WorkMag

*. Responsive Design 
*. Auto Blog Post summarize And “Read More” Button 
*. Auto Image Crop With Thumbnail (Home Page and Label Page Only) 
*. Css And HTML Base Menu With Drop down 
*. Auto Date Show At Header Right side 
*. Tabs Widgets ready (Powered By Jquery) 
*. Image Slider (Powered By Jquery) 
*. Simple User Friendly Search Box 
*. Auto Pagination Added To Post Footer 
*. Social Icons Collection (Placed Post Footer) 
*. Social Share Widget (Placed Post Footer) 
*. Custom Error 404 Page With Search Box (Official 404 Page) 
*. Related Post Widget (Placed Post Footer) 
*. Ads Banner Ready 
*. Meta Keywords And Description Support (Official Meta Description Support) 
*. Random Post Selector 
*. Recent Post By Label 
*. 4 Column Footer Area 
*. And many more 

Link Download Template WorkMag

Jika ingin menggunakan template ini atau hanya sekedar menambah koleksi saja, Anda dapat mendownloadnya secara gratis disini. 
Download: WorkMag.rar

Download WorkMag Premium Blogger Template Gratis

Sunday, May 18, 2014 Blogger, Template-Blog

Download iNews 2014 Blogger Template Responsive & Fast Loading

Pada kesempatan kali ini upie nawa akan membagikan template blog terbaru 2014 untuk blogger yang keren, fast loading, responsive, dan pastinya seo friendly. 






Sesuai namanya yaitu iNews 2014, template yang satu ini memang template terbaru awal 2014. Jika dilihat dari segi tampilan saya rasa template ini cukup menarik dan keren, terlebih sangat ringan, seo frindly, dan responsive. 

Fitur Template iNews 2014

*.Responsive 
*.Fast Loading 
*.Seo Friendly 
*.3 Column Footer 
*.1 Left and Right Sidebar 
*.And many more 

Link Download iNews 2014 Blogger Template

Untuk menggunakan template ini pada blog, Anda dapat mendownloadnya secara gratis / free. 
Download: iNews Blogger Template.rar 

Pastikan Anda mengupload template iNews 2014 dengan format xml yang terdapat didalam file rar tersebut (ekstrak terlebih dahulu). 

Semoga bermanfaat.

Download iNews 2014 Blogger Template Responsive & Fast Loading

Sunday, May 18, 2014 Blogger, Template-Blog

Download Template Faceblog

Template yang hampir mirip dengan situs jejaring social facebook

Download Template Faceblog

Tuesday, May 13, 2014 Blogger, Template-Blog

Download Template Leta VcardSM

Dalam template ini anda tidak bisa posting karena hanya untuk tampilan home saja. Anda bisa menampilkan profil , karir dan kontak.

Download Template Leta VcardSM

Tuesday, May 13, 2014 Blogger, Template-Blog

Cara Membuat Scroll Pada Popular Post

Membuat Scroll Pada Popular Post, blog archive dan label bertujuan untuk mendapatkan tampilan blog yang ringkas dan enak untuk dipandang jadi kelihatan rapi dan menghemat tempat pastinya.Blog akan kelihatan profesional dangan memakai scroll.Untuk membuat scroll ini sangat mudah dan gampang sekali.
Untuk membuatnya simak langkah-langkah berikut ini ;

1. Login ke akun blogger sobat 
2. Pilih Template >Edit HTML
3. Cari kode " ]]>< /b:skin >  " untuk mempercepat pencarian gunakan ctrl+f pada keyboard
4. Jika sudah ketemu copy dan pastekan kode di bawah ini tepat diatas kode ]]>< /b:skin >

#PopularPosts1 .widget-content{ height:170px; width:auto; overflow:auto; }

Kode diatas juga berlaku untuk pemasangan scroll  pada Blog Archive ,Label dan Categori blog.Sobat bisa mengganti tulisan PopularPost1 dengan kata-kata yang lain sesuai dengan widget sidebar blog sobat.Untuk mendapatkan ukuran scroll yang diinginkan sobat bisa mengganti tulisan warna biru dengan ukuran yang sobat inginkan.

O iya jangan lupa setelah meletakkan kode diatas lakukan pratijau untuk melihat pemasangan kode diatas sudah benar apa belum.Kalau sudah berhasil klik Simpan Template

Mudah bukan Cara Buat Scroll pada blog......??

Cara Membuat Scroll Pada Popular Post

Saturday, April 26, 2014 Blogger

Cara Membuat Scroll Di postingan blog

Sedikit penjelasan dan pengetahuan untuk sobat tentang definisi Fungsi dan kegunaanyaScroll Bar adalah untuk memudahkan kita apabila ada kode atau tulisan yang sangat panjang agar tidak memakan terlalu banyak tempat, intinya tampilan posting blog kita jadi singkat dan dinamis.




Cara Membuat scroll bar di posting blog sangatlah mudah, Caranya hampir sama seperti saat kita menulis postingan blog. Namun yang paling penting adalah jangan lupa sobat copy/paste atau Tulis Kode script di bawah ini pada mode Edit HTML di bagian posting blog.
 
Berikut Kode Script Scroll Bar Posting Blog:

<div style='padding: 5px; overflow: auto; width: auto; height:200px;border:1px solid #000000'>

LETAKKAN TULISAN SOBAT ATAU APAPUN DISINI.
(Tulisan ditulis di COmpose, sedangkan Kode di Tulis pada mode Edit HTML)

</div> 

DEMO :

 

Sir Alex Ferguson, a knighted champion So many years the boss and we adore him Simply the best, united through and through Forever we will be his Red Army Born in Govan on the night of new years eve Came a boy with dreams to be a champion And the rest is history, now he's left a legacy And he will be remembered forever Sir Alex Ferguson, a knighted champion So many years the boss and we adore him Simply the best, united through and through Forever we will be his Red Army Like the greats from before and others we adore Fergie keeps the Manchester tradition We play all out in attack, and we solid at the back and thats what make the club united Sir Alex Ferguson, a knighted champion So many years the boss and we adore him Simply the best, united through and through Forever we will be his Red Army Sir Alex Ferguson, a knighted champion So many years the boss and we adore him Simply the best, united through and through Forever we will be his Red Army Forever we will be his Red Army

Catatan:

• Ingat, Sobat Tulis  pada mode Edit HTML, bukan Compose.!!!
• Untuk melihat dan mengecek berhasil atau tidak, silahkan sobat klik Compose.
• height:200px; adalah ukuran lebar atas bawah kotak scroll, silahkan sobat ganti nilainya, seperti keinginan sobat.
• width: auto; adalah ukuran otomatis lebar samping kotak scroll, silahkan sobat ganti nilainya, seperti keinginan sobat.
• border:1px solid adalah ukuran tebal garis kotak scroll, silahkan sobat ganti nilainya, seperti yang sobat inginkan.
• #000000 adalah Kode warna pada garis kotak scroll, silahkan sobat ganti Kode warnanya seperti yang sobat inginkan.

Cara Membuat Scroll Di postingan blog

Monday, July 29, 2013 Blogger, Tutorial Blog

Cara Membuat Spoiler di postingan blog

Sebelum sobat membaca lebih jauh artikel ini, lebih baik bobat ketahui dulu apa itu Spoiler. Spoiler adalah cara untuk menyembunyikan teks,video,gambar,maupun script dengan tujuan untuk menghemat ruang postingan. Selain itu Spoiler juga dapat mempercepat loading pada suatu website ataupun blog. Nah, postingan saya kali ini akan membahas tentang Cara Membuat Spoiler Pada Postingan Blog. Penasaran bagaimana cara membuatnya? Silahkan baca dengan seksama tutorial yang saya tulis di bawah ini :
Cara Membuat Spoiler Pada Postingan Blog :
1. Login ke blogger
2. Kemudian tulis postingan baru
3. Ganti tab Compose dengan tab HTML
4. Masukan kode di bawah ini

<div id="spoiler" style="display:none">
konten yang disembunyikan
</div><button title="Klik untuk melihat/menyembunyikan" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Open/Close</button> 

5. Ganti kode yang berwarna merah dengan konten yang akan sobat sembunyikan.
6. Kode yang berwarna biru bisa sobat ganti sesuai selera sobat.

Cara Membuat Spoiler di postingan blog

Saturday, July 27, 2013 Blogger, Tutorial Blog

Cara Membuat Related Post Dengan Scroll

Cara membuat related post pati sudah banyak dibahas di blog yang lainnya. Tapi kali ini saya akan mencoba membagikannya kepada blogger yang masih belum tahu cara memasang related post fungsi scroll. Oke Langsung saja di praktekkan ya sob..

• Pertama buka blogger.
• Kedua masuk ke template => edit template => centang expand template widget
• Lalu sobat cari kode <data:post.body/> atau <p><data:post.body/></p>
• Setelah itu letakkan kode dibawah ini tepat dibawah kode tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'><H2>Related Post:</H2><div class='rbbox'><div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'><div id='albri'/><script type='text/javascript'>var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;var maxNumberOfPostsPerLabel = 4;var maxNumberOfLabels = 10;maxNumberOfPostsPerLabel = 50;maxNumberOfLabels = 3;function listEntries10(json) {var ul = document.createElement(&#39;ul&#39;);var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i &lt; maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k &lt; entry.link.length; k++) {if (entry.link[k].rel == &#39;alternate&#39;) {alturl = entry.link[k].href;break;}}var li = document.createElement(&#39;li&#39;);var a = document.createElement(&#39;a&#39;);a.href = alturl;if(a.href!=location.href) {var txt = document.createTextNode(entry.title.$t);a.appendChild(txt);li.appendChild(a);ul.appendChild(li);}}for (var l = 0; l &lt; json.feed.link.length; l++) {if (json.feed.link[l].rel == &#39;alternate&#39;) {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+13);var k;for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);var txt = document.createTextNode(label);var h = document.createElement(&#39;b&#39;);h.appendChild(txt);var div1 = document.createElement(&#39;div&#39;);div1.appendChild(h);div1.appendChild(ul);document.getElementById(&#39;albri&#39;).appendChild(div1);}}}function search10(query, label) {var script = document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);document.documentElement.firstChild.appendChild(script);}var labelArray = new Array();var numLabel = 0;<b:loop values='data:posts' var='post'><b:loop values='data:post.labels' var='label'>textLabel = &quot;<data:label.name/>&quot;;var test = 0;for (var i = 0; i &lt; labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel &lt; maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop></script></div><script type='text/javascript'>RelPost();</script></div></b:if>

5. Jika sudah, sobat cari kode ini ]]></b:skin>

6. Lalu letakkan kode dibawah ini tepat diatas kode ]]></b:skin> 

.rbbox{border: 1px solid #D8D8D8;padding: 5px;background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}.rbbox:hover{background-color: #EFFBEF;}

7. Jika sudah, yang perlu sobat lakukan adalah save template.

Untuk tulisan atau kode yang berwarna merah anda bisa menggantinya dengan Artikel Menarik Lainnya, atau apa saja terserah keinginan sobat.

Oke sob cukup sekian tutorial blog dari saya semoga bisa bermanfaat untuk blogger yang masih pemula.

Bila tutorial diatas tidak bisa , mohon berkomentar agar bisa dibetulkan. 

Cara Membuat Related Post Dengan Scroll

Saturday, July 27, 2013 Blogger, Tutorial Blog

Cara memasang widget twitter di blog

Cara memasang widget twitter di blog adalah merupakan cara yang cukup baik sebagai sarana media sosial yang nantinya akan menciptakan keterkaitan pengunjung dengan sebuah blog dengan cara mereka akan menerima tweet terbaru berisi tentang postingan terbaru blog agan jika mereka memfollow akun twitter agan. 

Cara memasang widget twitter di blog ini bukanlah satu-satunya cara jika kita menginginkan banyak followers, silahkan pergi ke salah satu postingan ane tentang cara memperbanyak follower di twitter gratis jika agan ingin mendapatkan banyak followers. Baiklah kembali ke pembahasan kita semula yaitu tentang cara memasang widget twitter di blog, untuk lebih jelasnya silahkan perhatikan langkah-langkah dibawah ini. 

Cara memasang widget twitter di blog

1. Silahkan masuk ke akun twitter agan dan klik link ini widgets twitter.
2. Klik "Create new"
3. Silahkan isi form yang sudah disediakan sesuai dengan akun twitter agan.
4. Selanjutnya jika tahap mengisi form sudah selesai, maka klik "Create widget".
5. Simpan terlebih dahulu code script yang diberikan twitter ke dalam file text documents di komputer agan.

Sampai disini agan sudah berhasil membuat widget twitter dan sekarang hanya tingggal memasang widget twitter di blog agan, untuk cara memasang widget twitter di blog silahkan ikuti langkah-langkah dibawah ini.

1. Masuk ke akun Blogger
2. Klik "Tata Letak"
3. Klik "Tambah Gadget" -> pilih "HTML/JavaScript"
4. Masukan code script yang di dapat dari twitter tadi.
5. Klik simpan dan lihatlah hasilnya 

Itulah singkat cerita tentang cara memasang widget twitter di blog semoga postingan ini bermanfaat khusunya untuk agan yang mempercantik blognya dengan memasang widget twitter, silahkan dicoba untuk yang membutuhkan dan tinggalkan komentar jika agan mendapatkan kesulitan agar ane dapat membantu. Terimakasih..

Cara memasang widget twitter di blog

Saturday, July 27, 2013 Blogger, Tutorial Blog

cara membuat widget berdasarkan label

Kali ini saya akan memberikan satu lagi tutorial blogger tentang membuat widget per label dengan hanya satu thumbnail pada bagian paling atas dan di bawahnya menampilkan judul saja, untuk lebih jelasnya silahkan lihat screenshot gambar dibawah.  Biasanya widget ini banyak digunakan oleh blog konten berita, salah satu fungsi widget ini untuk memudahkan para pembaca untuk mengeksplorasi tiap kategori yang ada dan bisa juga untuk meringkas ruang pada sebuah template. Sebenarnya tutorial ini sudah lama tapi karena banyak yang tanya di kotak komentar maupun di email, tidak ada salahnya jika saya perjelas lagi di artikel ini. Cara membuat widget per label yang saya gunakan disini..

Cara membuatnya adalah sebagai berikut :

1. Pertama yang mesti Anda lakukan adalah login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :

img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}img.label_thumb:hover{background:#f7f6f6}.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}

1. Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
2. Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :

<script type='text/javascript'>//<![CDATA[function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi31qqkKbL7Sp8l23s7W9KR8_wJVF9V7d3H0XkLR0pJuilCxsPc99sgy0ldGrG_pOxfAe5xlPKk-0SvyLhRzd5VFFdrHVievzrYojWzuXEuZJ3ppaS17qB9ntNtPqQaCarp7-8j5Ary92l9/';}var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}elseif("summary"in entry){var postcontent=entry.summary.$t;}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}if(showcommentnum==true){if(flag==1){towrite=towrite+' | ';}if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}if(displaymore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}document.write(towrite);document.write('</li>');if(displayseparator==true)if(i!=(numposts-1))document.write('');}document.write('</ul>');}//]]></script>

 Jika kode script diatas terlalu panjang, Anda bisa simpan di tempat penyimpanan Google Code Anda sendiri..

Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :

<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>
<script type="text/javascript" src="/feeds/posts/default/-/news?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript">function recentpostslist(json) { document.write('<ul>'); for (var i = 1; i < json.feed.entry.length; i++) {    for (var j = 1; j < json.feed.entry[i].link.length; j++) {      if (json.feed.entry[i].link[j].rel == 'alternate') {        break;      }    }var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bsvar entryTitle = json.feed.entry[i].title.$t;var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>"; document.write(item); } document.write('</ul>'); }</script><script src="http://blog anda.blogspot.com/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script><a href="http://blog anda.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

1. Keterangan :
   Warna biru : adalah label atau kategori yang ditampikan, Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
   Warna merah : Ganti URL dengan URL blog anda.
   
   Selanjutnya save dan lihat hasilnya.

Tampilan dari widget ini mengikuti kode CSS sidebar (jika Anda meletakkan di sidebar) pada template yang Anda pakai. Kode CSS yang digunakan pada pembuatan widget ini hanya digunakan untuk mengatur tampilan thumbnail.

Demikian tadi tutorial jadul mengenai membuat widget per label kali ini, jika masih ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar, selamat mencoba dan semoga bermanfaat.

sumber : maskolis.com//2012/07/membuat-widget-label-tertentu-dengan.html

cara membuat widget berdasarkan label

Saturday, July 27, 2013 Blogger, Tutorial Blog

Cara Membuat Auto ReadMore Blogger dengan Image Thumbnail

Auto Readmore adalah fitur yang berfungsi untuk memotong badan postingan blog yang panjang dan meringkasnya menjadi beberapa karakter. Fitur yang bisa ditambahakan pada auto readmore adalah membuat karakter teks yang bisa rata kanan kiri, rata kiri, rata tengah dan rata kanan. Selain itu, fitur ini juga akan menampilkan salah satu gambar yang termuat didalam badan postingan dan mengubah ukurannya menjadi lebih kecil dibandingkan dengan gambar aslinya..

1. Langkah-Langkah Pemasangan

• Login ke Blogger
• Pilih Template » Edit HTML » Centang Expand Template Widget
• Copy kode di bawah ini dan pastekan tepat di atas tag </head>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'><script type='text/javascript'>var thumbnail_mode = &quot;float&quot; ;summary_noimg = 500;summary_img = 400;img_thumb_height = 100;img_thumb_width = 100;</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(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></b:if> </b:if>

Update :

Tag conditional (warna biru) adalah tag yang berfungsi untuk menyembunyikan "Tombol Auto Readmore" pada halaman postingan dan halaman statis (laman).

Pengaturan Lanjutan :

1. summary_noimg = 500; adalah jumlah karakter yang ditampilkan tanpa image atau gambar
2. summary_img = 400; adalah jumlah karakter yang ditampilkan jika terdapat sebuah gambar
3. img_thumb_height = 100; adalah tinggi gambar / image
4. img_thumb_width = 100; adalah lebar gambar / image

• Langkah selanjutnya cari tag <data:post.body/> lalu ganti dengan kode di bawah ini :

<b:if cond='data:blog.pageType == &quot;item&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><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='clear: both;'/><a expr:href='data:post.url' rel='bookmark'><span style='font:bold ;color:#fff;'><b>Read More »</b></span></a></b:if></b:if>

Keterangan :

Read more » silahkan diganti dengan kata-kata sendiri. Contoh Baca Selengkapnya »,Baca Selanjutnya » dan lain sebagainya.

• Sekarang untuk melihat hasilnya, pilih pratinjau terlebih dulu dan jika anda merasa sudah pas dengan hasil yang ditampilkan, baru pilih simpan.

 2. Penambahan fitur

• Untuk mengganti kata Read more » dengan image atau gambar, ganti kata Read more » dengan kode di bawah ini beserta url gambar yang sudah diupload :

 <img border='0' src='url image disini'/>

• Selanjutnya, untuk membuat karakter teks yang akan ditampilkan menjadi rata kanan kiri, cari kode di bawah ini :

<div expr:id='&quot;summary&quot; + data:post.id'>

• Dan tambahkan style='text-align:justify;' tepat dibelakang kode "<div" atau di depan kode "expr;id". Jika sudah dimasukkan, maka hasilnya akan terlihat seperti ini :

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

Cara Membuat Auto ReadMore Blogger dengan Image Thumbnail

Saturday, July 27, 2013 Blogger, Tutorial Blog