468x60 Ads

This is an example of a HTML caption with a link.
Kali ini saya akan berbagi dengan kawan pengunjung setia BlogBego Creation Tool untuk mengetahui Postingan yang paling sering dilihat :z; dengan kata lain Populer, maksudnya postingan Blog kita yang dilihat akan berbeda warnanya dengan latar belakangnya aslinya :q; maaf bahasanya sedikit Ribet
Oke langsung saja ke cara membuatnya :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTML 
  • Sebaiknya simpan Template kawan dulu 
Ada 2 [dua] Caranya, silahkan pilih salah satu
Cara Pertama 
  • Copas script berikut tepat diatas </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var bgU=location.href;bgPP=document.getElementById('PopularPosts1');bgTN=bgPP.getElementsByTagName('a');if(bgTN){bgH=bgTN.item(0).href;if(bgU.indexOf(bgH)!=-1){document.write('<style type="text/css">body{background:#ff00ff!important}</style>')}}
//]]>
</script>
</b:if>
Cara Kedua

  • Copas script berikut diatas <b:if cond='data:showThumbnails == &quot;false&quot;'>

<b:if cond='data:post.href == data:blog.url'>
<style type='text/css'>body{background:#ff00ff!important}</style>
</b:if>

  • Teks yang berwarna violet adalah warna latar belakang, silahkan disesuaikan asal berbeda dengan warna latar belakang Blog kawan :r; 
  • Simpan Template kawan



        
READ MORE
Kawan masih ingat postingan saya tentang Slide Carousel untuk Daftar Isi, :y; sekarang masih tetap tentang Slide Carousel cuma tampilannya sangat berbeda dengan yang dulu setelah saya adakan perbaikan-perbaikan maupun pengurangan atau menghilangkan kode-kode yang tidak perlu, :z; hal ini terispirasi dari Artikel Terkait berisi Thumbnail perhatikan screenshotnya dibawah ini :q; 

Tampilan Carousel sekarang

Carousel lama


Cara Membuatnya :
Bagian Template

  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTML 
  • Copas Script berikut diatas ]]></b:skin>
#bbccarousel{width: 100%;height:175px;position:relative; display:block;background: transparent;margin:0 10px 8px auto;}
#bbccarousel h3{color:#00f;margin:0 2px 2px;font-size:10px;}
#bbccarousel .container{position:absolute;left:0px;width:580px; height:175px; overflow:hidden;padding:0;margin:0 auto 0;}
#bbccarousel .thumb{float:left;margin-right:10px;}
#bbccarousel .thumb:hover{filter:alpha(opacity=70);opacity:.7}
#bbccarousel ul{width:100000px;position:relative;margin-top:10px;}
#bbccarousel ul li{background:#FFF;display:inline;text-align:center; font:bold 12px Arial;width:102px;height:150px;border:1px solid #000;margin:0 2px 20px 4px;padding:6px;}
#bbccarousel ul li a.slider_title{color:#222;display:block;margin:0;padding:0;}
#bbccarousel ul li a.slider_title:hover{color:#F00;}
#bbccarousel a img{display:block;background:none;margin-top:0;}
  • Teks yang saya beri warna merah silahkan disesuaikan dengan lebar penempatannya
  • Selanjutnya Copas Script berikut dibawah  ]]></b:skin> atau diatas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><script src='https://sites.google.com/site/blogbegocreation/javascript/bbccarousel.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfXLcxEHXOwN0BGPVrlH4mUoszES4nUeVi5DE39QkEBaTgkPe25mP04UAy8jIUZ6jFtjSozgslFsWgahkMHgu3WXAIyyVayJhO6ShqQ9ks9hfACz7cBNpagf6fCFovp2ndLO4OVANlKlA/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
recentposts1 = 10;
function removeHtmlTag(strx,chop){
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);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < recentposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel =='alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; 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!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Ags","Sep","Okt","Nov","Des"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="80" class="alignnone" src="'+img[i]+'"/></a></div><h3>'+daystr+'</h3><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>
  • Teks yang beri warna merah [jquery], kalau pada Template kawan sudah ada walau sejenisnya,  jquery  tersebut bisa kawan hilangkan 
  • Teks yang berwarna Biru untuk lebar dan tinggi image
  • Simpan Template kawan 
Bagian Tata Letak 
  • Pada Tata Letak pilih Tambah Gadget
  • Pilih tanda [+] pada HTML / JavaScript
  • Copas Kode berikut kedalamnya
<div id='bbccarousel'>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default?max-results="+recentposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>      
<div class='clear'/></div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$("#bbccarousel .container").bbcCarousel({
    auto:800,
    scroll: 1,
    speed: 3000,  
    visible: 5,
    start: 1,
    circular: true,
});
    })})(jQuery)  
</script></div></div>
  • Visible: 5, adalah jumlah yang ditampilkan - disesuaikan 
  • Simpan Blog kawan

READ MORE
Seharusnya Cara Membuat Artikel Terkait berisi Thumbnail ini sudah lama saya bagikan biar ngumpul dengan Cara Membuat Artikel Terkait lainnya :y; tapi dasar saya sedikit pelupa ya terlupakan jadinya, 
Screenshot

Cara Membuatnya :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTML 
  • Copas script berikut dibawah ]]></b:skin> atau diatas </head>

<!--Artikel Terkait berisi Thumbnail Script-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {float:center;text-align:left;margin: 0 auto 0;text-transform:none;height:100%;min-height:100%;padding:5px 5px 0 5px;}
#related-posts h2{font-size: 1.6em;font-weight: normal;color: black;font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;margin-bottom: 0.75em;padding-top: 0em;}
#related-posts a{color:black;padding:0 2px;margin:0 5px 0;}
#related-posts a:hover{color:black;padding:0;background-color:#999;}
</style>
<script type='text/javascript'>
var defaultnoimage='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ-aXZBqIqCf01OLDMKruQ3TOwhz0WiF31W7b7i2IxYqf13s5ZfDNYDA0uvvKpqaXSe1dQ9WyAyzSpd3XKxIIQQPn602-2N05C553Zevs1c6Ho1Yt10udpLaDxI3vZkdn6h0lM46OKUtw/s400/noimage.png';
var maxresults=6;
var splittercolor=&quot;#ff0000&quot;;
var relatedpoststitle=&quot;Artikel Terkait&quot;;
</script>
<script src='https://sites.google.com/site/blogbegocreation/javascript/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Artikel Terkait berisi Thumbnail Script End-->

  • Selanjutnya cari <div class='post-footer-line post-footer-line-1'> 
  • Copas Kode berikut dibawahnya 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Artikel Terkait berisi Thumbnail Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=7&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Artikel Terkait berisi Thumbnail Code End-->
</b:if> 
  • Teks [angka 6 dan 7] yang saya beri warna merah adalah jumlah yang ditampilkan, dengan selisih 1[satu] 
  • Teks yang saya beri warna Biru adalah Judul silahkan disesuaikan
  • Simpan Tmplate kawan 

READ MORE
Sebelumnya saya sudah pernah berbagi tentang Tambahkan Emoticon pada Blog, yang bisa ditampilkan baik pada Komentar maupun pada Postingan :y; dan untuk Blog yang memakai Komentar Thread hanya akan tampil pada Komentarnya saja :q; seperti Emoticons yang diciptakan oleh master DTE yang sudah saya Edit supaya kawan tidak berkecil hati karena bisa tampil baik di Komentar maupun di Postingan Blog, cuma Logo Iconnya berbeda [maaf saya belum sempat untuk meng-Editnya] agar sama :z;
Perlu kawan ketahui, pada umumnya Emoticons mempergunakan simbol misalnya :) :# atau simbol yang lainnya  untuk pemanggilan, tapi saya tetap mempergunakan : [titik-dua], abjad [a s/d z] ; [titik-koma] tanpa spasi kalau tidak lain dari yang lain bukan BlogBego namanya

Khusus untuk Postingan 
Khusus untuk Komentar
Caranya sebagai berikut :

  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTML
  • Scrool ke bawah sampai </body> 
  • Copas script berikut tepat diatasnya

<style type='text/css'>
.emoWrap {background-color:#585858;border:0px solid #D3BA59;padding:10px 14px;color: black;font:normal bold 12px/normal Tahoma,Arial,Sans-Serif;text-align:center;}
.emo,.emoKey {display:inline-block; /* Penting! */ *display:inline;vertical-align:middle;}
.emoKey {border:1px solid #ccc;background-color:white;font:normal bold 11px/normal Arial,Sans-Serif;padding:1px 2px;margin:0 0 0 2px;color:black;}
</style>
&lt;strong id=&quot;dte_emo-bar&quot;&gt;Klik untuk melihat kode: 
<br/>
<style type='text/css'>
.emoWrap {background-color:#585858;border:0px solid #D3BA59;padding:10px 14px;color: black;font:normal bold 12px/normal Tahoma,Arial,Sans-Serif;text-align:center;}
.emo,.emoKey {display:inline-block; /* Penting! */ *display:inline;vertical-align:middle;}
.emoKey {border:1px solid #ccc;background-color:white;font:normal bold 11px/normal Arial,Sans-Serif;padding:1px 2px;margin:0 0 0 2px;color:black;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
    putEmoAbove = "#comment-editor",
    emoMessage = "Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol.";
//]]>
</script>
<script src='https://sites.google.com/site/blogbegocreation/javascript/autoemoticons.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogbegocreation/javascript/Editor_Smyle.js' type='text/javascript'/>
&lt;/strong&gt; 
  • Simpan Template kawan 
  • Selanjutnya cari <b:includable id='threaded-comment-form' var='post'> atau yang mirip seperti berikut ini kodenya 
<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form' id='comment-form'> <!...Kotak Pesan kalau ada...>
                  <p><data:blogCommentMessage/></p>
  <br/>
&lt;strong id=&quot;dte_emo-bar&quot;&gt;Klik untuk melihat kode: 
&lt;/strong&gt; <!...Kode Pesan yang kawan Tambahkan...>

           <data:blogTeamBlogMessage/>
            <b:if cond='data:mobile'>
              <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
                    <iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' name='comment-editor' src='' style='display:none;border:none;background:none;width:100%;height:300px;'/>
                 <b:else/>  <!...Ciri yang kawan Cari...>
                    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
                    <iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' name='comment-editor' src='' style='border:none;background:none;width:100%;height:300px;'/>
                  </b:if>
                  <data:post.friendConnectJs/>
                  <data:post.cmtfpIframe/>
                  <script type='text/javascript'>
                    BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
                  </script>
                </div></b:includable>

  • Teks yang saya beri warna merah adalah Kotak Pesan untuk Template yang sudah ditambahkan 
  • Teks yang saya beri warna biru adalah Pesan untuk melihat Kode Emoticons - ditambahkan
  • Simpan Template kawan 

READ MORE
Terus terang sekarang lagi Blank Mau posting apa.... !!! :r; sedangkan disatu sisi lainnya jadwal posting wajib untuk mengecilkan Traffic Blog, untuk itu saya mohon maaf untuk kawan yang setia mengunjungi BlogBego Creation :z; karena apa yang akan saya bagikan sekarang ini sudah umum diterapkan oleh para Blogger, tapi tak ada salahnya untuk kawan Blogger Pemula yang belum tahu atau mengetahui, Cara Mempercantik Border Table dengan CSS :y;
Sebelum melangkah lebih jauh alangkah baiknya kawan mengetahui Pedoman Dasar CSS, karena tanpa ini Tampilan Blog kawan sebagai contoh bagus di Chrome belum tentu bagus di Mozilla :q; 

Dasar CSS Border

screenshot untuk Tab Menu
Cara Membuatnya :

CONTOH
<div style="border: 2px solid #000; margin: 0; padding: 5px; text-align: center;"> CONTOH </div>


  CONTOH 

<div style="border:2px solid #000000;-moz-transform: skew(32deg,12deg);-       webkit-transform: skew(32deg,12deg);"> CONTOH </div>


 CONTOH
<div style="-moz-transform: skew(02deg,150deg); -webkit-transform: skew(02deg,150deg); border: 2px solid #000000; ">
&nbsp;CONTOH </div>


   CONTOH

<div style="border:2px solid #000000;-moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 10px 10px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 10px 10px; border-top-right-radius:0px 0px;border-bottom-right-radius: 10px 10px; "> CONTOH </div>

   CONTOH

<div style="border:2px solid #000000;-moz-border-radius-topleft: 10px 10px;-moz-border-radius- bottomleft: 0px 0px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 0px 0px; -border-top-left-radius:10px 10px;-border-bottom-left-radius: 0px 0px;">CONTOH</div>

    CONTOH

<div style="border:2px solid #000000;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 10px 10px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 10px 10px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 10px 10px;"> CONTOH </div>


  CONTOH

<div style="border:2px solid #000000;-moz-border radius-topright: 10px 10px;-moz-border-radius-bottomright: 10px 10px; -webkit-border-top-right-radius: 10px 10px;-webkit-border-bottom-right-radius: 10px 10px; border-top-right-radius: 10px 10px;border-bottom-right-radius: 10px 10px; ">CONTOH</div>


   CONTOH


<div style="border:2px solid #000000;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 10px 10px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 10px 10px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 10px 10px;-moz-border-radius-topright: 10px 10px;-moz-border-radius-bottomright: 10px 10px; -webkit-border-top-right-radius: 10px 10px;-webkit-border-bottom-right-radius: 10px 10px; border-top-right-radius: 10px 10px;border-bottom-right-radius: 10px 10px;"> CONTOH </div>
atau cara simpelnya
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 2px solid #000000;">CONTOH </div>


CONTOH
<div style="-moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; border: 2px solid #000000; height: 90px; padding: 5px; text-align: center; width: 90px;"> CONTOH </div>


Semoga ada manfaatnya

READ MORE
Sekarang saya akan berbagi dengan kawan beberapa Menu Navigasi yang kelihatan sedikit unik lain dari yang lain hasil karya oleh Master-master Blogger :q; mudah-mudahan selera kawan sama dengan selera saya, yang semuanya ini saya temukan saat Blogwalking. Silahkan kawan Lihat langsung Demonya maupun untuk mendownload kalau ingin mencoba memakainya













Pure CSS DropDown Menu




Sebenarnya masih banyak lagi yang lainnya, kalau ada waktu lain waktu saya sambung lagi :q; untuk sekarang saya cukupkan hanya sampai disini dulu
Selamat mencoba


READ MORE