Showing posts with label Blogging. Show all posts
Showing posts with label Blogging. Show all posts
Cara Memasang Iklan di Atas dan di Dawah Postingan Blogger
Untuk memasang iklan di atas dan di bawah postingan blog, cukup pasangkan kode iklannya di atas atau di bawah kode <data:post.body/> yang diapit Tag Kondisional halaman posting (halaman) dalam, seperti ini:
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Kode <data:post.body/> dalam template ada dua sampai empat, namun salah satunya dipastikan dibungkus kode warna merah di atas.
Untuk memasang iklan di atas dan di bawah postingan blog, letakan saja kode iklannya di atas atau di bawah kode tersebut.*
Read More with Thumbnail Blogger with Option (New Version)
How to Add Read More with Thumbnail Blogger with Options. The Options area:
Judul & Ringkasan di Samping Gambar
http://cbbloggerlab.blogspot.co.id/2015/11/cara-membuat-auto-read-more-blog-judul.html
http://www.thuthuatict.com/2014/02/auto-readmore-thu-thuat-hien-bai-viet-o.html
- You can show default thumbnail when your post does not contain any image.
- You can disable auto read more function for few posts on home page.
- You can disable auto read more function on home page, archive page and other index pageType.
Using Read More Option with Thumbnail on Blogger version 2
1/ First go to Blogger Dashboard then switch to Template tab
2/ Must take backup of your template
3/ Now click on Edit HTML and then on Proceed button
4/ Now check on Expand Widget Template
5/ Now search for </head> inside Blogger template
6/ Now copy and paste code given below just above </head>
2/ Must take backup of your template
3/ Now click on Edit HTML and then on Proceed button
4/ Now check on Expand Widget Template
5/ Now search for </head> inside Blogger template
6/ Now copy and paste code given below just above </head>
<script type='text/javascript'>
var summaryConf = {
showImage: true,
imgFloat: 'left',
imgWidth: 120,
imgHeight: 120,
defaultThumb: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid3-qaNgmOKO89Ek2XjId-G6TUCz2dKbJiFH8wS3HdQkcllLqS_4dr2dIzfpoUxj6KJzafB1MNfDazg70BQTQ-QGFFa7lLpha3sDagmUkv2BP-WVW_SoFwV43iCu-xR3Dr_vWr9Y5rnoE/s1600/thumb.png',
words: 100,
wordsNoImg: 120,
skip: 0,
showHome: true,
showLabel: true
};
</script>
<script src='http://yourjavascript.com/55335021413/techprevue-readmore.js'/>
Alternative JS Link:
<script src='https://sites.google.com/site/techprevue/home/techprevue-autoreadmore.js'/>
7/ And after finishing above steps now search for following code
<div class='post-body entry-content'
Just below this you’ll get following code <data:post.body/>
8/ Change <data:post.body/> code with the following code:
Preview your template if everything is appearing well then...
Just below this you’ll get following code <data:post.body/>
8/ Change <data:post.body/> code with the following code:
<span expr:id='data:post.id'><data:post.body/></span> <b:if cond='data:blog.pageType == "index"'> <script type='text/javascript'>summary("<data:post.id/>")</script> <span style='float:right;padding-top:12px;'><a expr:href='data:post.url'>Read More</a></span> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <script type='text/javascript'>summary("<data:post.id/>")</script> <span style='float:right;padding-top:12px;'><a expr:href='data:post.url'>Read More</a></span> </b:if> </b:if>
Preview your template if everything is appearing well then...
Save template!
Auto read more script control features:
- showImage: true, if do not want to show thumbnail then do it ‘false’
- imgFloat: ‘left’, if you want to show thumbnail right to summary then do it ‘right’
- imgWidth: 120, This is thumbnail width in pixel
- imgHeight: 120, This is thumbnail height in pixel
- defaultThumb: ‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid3-qaNgmOKO89Ek2XjId-G6TUCz2dKbJiFH8wS3HdQkcllLqS_4dr2dIzfpoUxj6KJzafB1MNfDazg70BQTQ-QGFFa7lLpha3sDagmUkv2BP-WVW_SoFwV43iCu-xR3Dr_vWr9Y5rnoE/s1600/thumb.png’, if you want to use custom thumbnail as per your blog design just change this url
- words: 100, this is number of words for summary on index pageType in presence of thumbnail
- wordsNoImg: 120, this is number of words for summary on index pageType in absence of thumbnail
- skip: 0, if you want read more function on all posts then leave it as it is, if want to skip first do it ‘1’ or for two posts do it ‘2’ and so on…
- showHome: true, if you do not want read more function on home page, do it ‘false’
- showLabel: true, if you do not want read more function on label page, do it ‘false’
Source:
http://www.techprevue.com/read-more-option-with-thumbnail-blogger/
Magazine Style: One & Two Column
http://helplogger.blogspot.co.id/2014/01/create-magazine-style-layout-for-blogger-posts.html
Magazine Style: One & Two Column
http://helplogger.blogspot.co.id/2014/01/create-magazine-style-layout-for-blogger-posts.html
Judul & Ringkasan di Samping Gambar
http://cbbloggerlab.blogspot.co.id/2015/11/cara-membuat-auto-read-more-blog-judul.html
http://www.thuthuatict.com/2014/02/auto-readmore-thu-thuat-hien-bai-viet-o.html
Pasang jQuery Terbaru untuk Kecepatan Loading Blog
Cara Memasang kode Scrpt jQuery Terbaru di Blog untuk Kecepatan Loading.
Namun, daripada susah-susah memasukkan kode versi terbaru, kita bisa menggunakan angka 1 yang secara otomatis akan merujuk kepada versi terbarunya.
CARANYA?
Pasang saja kode di bawah ini di template Anda, hapus kode lama.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
Pengertian jQuery
What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. (Source & Downloadable Link).
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. (Source & Downloadable Link).
Membuat Auto Readmore Blogger with Thumbnail Image
Cara Membuat Auto Readmore Blogger with Thumbnail Image, yaitu menampilkan judul, gambar thumnail, dan cuplikan teks awal posting di halaman depan blogger. Penampakannya seperti di blog ini atau gambar di bawah ini:
Cara Membuatnya:
1. Template > Edit HTML
2. Copas kode JavaScrpit dan HTML/XML di bawah ini.
3. Save!
KODE JAVASCRIPT
Simpan di atas </head>
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
.readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>
KODE HTML
Simpan di atas kode <data:post.body/>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
Cara Membuatnya:
1. Template > Edit HTML
2. Copas kode JavaScrpit dan HTML/XML di bawah ini.
3. Save!
KODE JAVASCRIPT
Simpan di atas </head>
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
.readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>
KODE HTML
Simpan di atas kode <data:post.body/>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
Cara Mengetahui (Cek) Responsive Template Blog
Jika template blog itu mobile friendly (responsif), maka akan tampak ukurannya mengikuti lebar layar monitor.
Untuk lebih menyakinkan, kita bisa buka sendiri di HP/SmartPhone atau Tablet, juga menggunakan situs-situs tempat mengecek template responsive sebagai berikut:
Masih banyak yang lain, namun ketiga situs di atas paling OK karena kita bisa mengetes di hampir semua SmartPhone dan ukuran monitor (layar).
Jangan lupa cek juga di Google Developer PageSpeed untuk mengecek keresponsifan sekaligus kecepatan loding template blog. (http://testemplatecb.blogspot.com).*
Top 5 SEO Friendly and Fast Loading Blogger Template
Here's Top 5 SEO Friendly and Fast Loading Blogger Template
1. Johny Wusss
2. Thesis SEO
3. Super SEO
4. Fastest Magz
5. Simple White Clean
Lorem ipsum is a placeholder text (filler text) commonly used to demonstrate the graphic elements of a document or visual presentation, such as font, typography, and layout, by removing the distraction of meaningful content.
The lorem ipsum text is typically a mangled section of De finibus bonorum et malorum, a 1st-century BC Latin text by Cicero, with words altered, added, and removed that make it nonsensical and not proper Latin.
A common form of lorem ipsum text reads as follows:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Another version of the text uses the word "adipisici" (rather than "adipisicing"; the digraph ng at the end of words is alien to classical Latin).
Other versions of lorem ipsum include additional words to add variety so that repeated verses will not word-wrap on the same phrases. (wikipedia).*
1. Johny Wusss
2. Thesis SEO
3. Super SEO
4. Fastest Magz
5. Simple White Clean
The lorem ipsum text is typically a mangled section of De finibus bonorum et malorum, a 1st-century BC Latin text by Cicero, with words altered, added, and removed that make it nonsensical and not proper Latin.
A common form of lorem ipsum text reads as follows:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Another version of the text uses the word "adipisici" (rather than "adipisicing"; the digraph ng at the end of words is alien to classical Latin).
Other versions of lorem ipsum include additional words to add variety so that repeated verses will not word-wrap on the same phrases. (wikipedia).*
Kode Html dalam Postingan
10 Template Blog SEO Terpopuler 2014
Inilah 10 Template Blog SEO Terpopuler di dunia. Semuanya SEO Friendly dan Responsive. Free download dan free for use!
Lorem ipsum is a placeholder text (filler text) commonly used to demonstrate the graphic elements of a document or visual presentation, such as font, typography, and layout, by removing the distraction of meaningful content.
The lorem ipsum text is typically a mangled section of De finibus bonorum et malorum, a 1st-century BC Latin text by Cicero, with words altered, added, and removed that make it nonsensical and not proper Latin.
A common form of lorem ipsum text reads as follows:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Another version of the text uses the word "adipisici" (rather than "adipisicing"; the digraph ng at the end of words is alien to classical Latin).
Other versions of lorem ipsum include additional words to add variety so that repeated verses will not word-wrap on the same phrases. (wikipedia).*
1. Sensational - A Responsive Blogger Template
4. Cronicl - A Responsive blogger template
5. MaxMag Responsive Blogger Template
6. Pinfinity Blogger Template
7. Eleven40 Premium Wordpress Style Blogger Template
8. Arancio Blogger Template
9. Project 10 Blogger Template
10. Dazzling Designer Blogger Template
I hope enjoy this templates and spread with your friends. Please share and drop your valuable comments.
Source
Daftar Blog Terpopuler di Indonesia
Top 10 Blog Terpopuler di Indonesia berdasarkan Rank Alexa terbaru, Minggu 1 Maret 2015.
Daftar blog terbanyak dikunjungi versi Alexa ini fokus pada nama blog ekstensi subdomain blogspot.com. Artinya, blog dengan domain dot com, dot net, atau Top Domain Level (TDL) tidak dihitung.
Dari data Alexa, tidak ada satu pun blogger dengan subdomain blogspot.com juga platform blog wordpress.com dan lainnya, yang masuk 500 besar. Secara, Alexa hanya menampilkan data 500 besar peringkat situs di Indonesia dan negara lainnya, juga di dunia.
Untuk perinkat 500 ke atas, kita hanya bisa cek satu-satu. Misalnya, blog contohblognih.blogspot.com memiliki Rank Alexa sbb:
- Global rank: 35,793
- Rank in Indonesia: 533
Untuk blog lain, misalnya blog Klinik Blogging ini, yang baru dibikin seminggu lalu, punya ranking TIDAK DIKETAHUI karena Alexa Data-nya masih kosong!
Berapa peringkat blog Anda?