™ Jay Sing ™

Nah masih dalam suasana Ramadhan, kali ini saya   memberikan informasi buat para sobat sekalain, untuk kali ini yang saya bahas adalah tentang cara membuat gambar berputar pada postingan blog! Hal ini hanya untuk memperindah tampilan di blog kita.

4. Klik save template dan lihat hasilnya. Semoga Sukses :D

Cara Membuat Label Kategori Pada Blog

• Langkah pertama silahkan Login ke akun blogger sobat masing-masing 
• Pilih menu Template lalu Edit Html (centang Expand Template Widget) 
• Selanjutnya silahkan sobat cari kode ]]></b:skin> (agar lebih mudah, gunakan fitur pencarian dengan menekan CTRL + F pada keyboard sobat) 
• setelah sobat menemukan kode tersebut, silahkan letakan kode berikut tepat diatas kode ]]></b:skin> Tadi. 

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}

• Keterangan : Kode yang berwarna merah adalah lebar dan tinggi Tumbnail
• Selanjutnya, Masih pada Edit Html silahkan cari kode </head> 
• Setelah ketemu, silahkan letakkan kode berikut tepat 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/AVvXsEgzXazZs4iMBJbwuRJVO7Ajb5J12JQtfdR1cuKALpGifuAXQO9wSI74-HB-RC53ZICtRKfuwWKPhtwFiQxWIWJF777dawieWeXkz24UbnZe9b7UwhTioUo_FZkTxxZ5xZE2oRtBr4pye_Px/';}
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;}
else
if("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>

• Lalu simpan template sobat 
• Langkah selanjutnya silahkan sobat pindah ke menu Tata Letak dan tambahkan gadget HTML/JAVASCRIPT lalu masukkan kode berikut : 

<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 + "'";//bs
var 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://nyancok.blogspot.com/feeds/posts/summary/-/Download?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://lhk-blogs.blogspot.com/search/label/Download" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

• Keterangan : Silahkan ganti tulisan yang saya tandai dengan warna Orange dengan Label yang sobat gunakan pada blog. dan yang saya beri tanda warna merah silahkan ganti dengan Url Blog sobat.

Demikian yang dapat saya share kepada sobat Semuanya, semoga bermanfaat dan dapat membantu sobat. Terimakasih sudah berkenan mampir ke blog sederhana saya

Blockquote adalah Sebuah Kotak yang biasanya digunakan oleh kebanyakan pengguna blog untuk menuliskan kode atau script yang di posting pada blog dengan tampilan latar berbeda warna dari latar asli blogger itu sendiri. Pada dasarnya Blogger sendiri sudah menyediakan Fasilitas Blockquote ini, namun kurang menarik rasanya jika tampilan dari Blockquote itu biasa-biasa saja. Nah nyancok Cara Membuat Blockquote pada Posting Blog dengan tampilan yang sedikit berbeda dari Fasilitas Blockquote yang disediakan oleg Blogger. Langsung saja berikut langkah-langkahnya :

Cara Membuat Blockquote pada Posting Blog

• Login ke Dashboard Blogger sobat
• Pilih Menu Template
• Pilih Edit Html (Beri tanda centang pada Expang Widget template)
• Setelah itu cari kode ]]></b:skin>
• Setelah Sobat berhasil menemukanya, Silahkan taruh kode berikut tepat dibawah kode ]]></b:skin> tadi.

blockquote { background: #484B52url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj45JDPk6lzWWPiAHdIk8s7nTSmUQAt8sOsuXxWjTHuUi0nj1uy4g9VBC-u1Hg9U-z-hQln6NNTYez2hta6nck5u-d8JemiqF4VK2teO6b7zaLtdGjQllbtIcy4pumX8Dc6cUTWXVkmkuc/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; }

Keterangan : Kode yang saya beri warna merah adalah warna dari background Blockquote tersebut, jika sobat ingin memberikan warna yang berbeda, silahkan sobat ganti dengan warna kesukaan sobat.

• Setelah selesai, simpan template sobat dan lihat hasilnya.

Demikian Posting saya hari ini, Semoga bermanfaat dan terimakasih sudah bersedia mampir di Blog yang sederhana ini.

• Cari kode ini:

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if> 

• Jika telah ketemu, ganti semua kode di atas dengan kode di bawah ini:

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if> 

• Klik Simpan Template 

Pada Halaman Tata Letak - Elemen Halaman, buat gadget baru > Add Gadget - HTML/Javascript , beri judul "Artikel Terkait" dan isi kode di bawah ini di dalamnya: (atur sendiri Letak Gadget dengan mendrag dan simpan)

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script> 

Agar related post ini tidak muncul di halaman utama dan label, anda perlu sedikit memodifikasi widget ini.
Masuk kembali ke edit HTML. Centang expand widget template, dan temukan kode ini :

<b:widget id='HTML4' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget> Ganti semua kode di atas dengan kode:
<b:widget id='HTML4' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

•  Klik Simpan Template 

Silahkan lihat hasilnya. Selamat mencoba!!!.

Kali ini saya bakal share sedikit mengenai Cara Membuat Auto Read More Berputar.

Read More ini berfungsi sebagai peringkas posting agar tidak memanjang. Read More ini sudah terpasang namun anda perlu memotongnya dengan tool bar yang ada diatas disaat anda membuat posting.

Tentu capek bukan?, Digunakanlah Auto Read More ini, auto read more ini berfungsi sama jika anda memotong nya dengan tool bar, dengan menggunakan auto read more ini posting akan terpotong sendirinya.

Cara untuk membuatnya Langsung aja ikuti cara di bawah:

• Silahkan Masuk Ke Blogger Anda.
• Kemudian, Klik Menu Template, --> Backup templat Anda Terlebih dahulu, --> Lalu, Klik Tombol Edit HTML.
• Cari Kode ]]></b:skin> ,dengan menekan CTRL+F.
• Masukan Kode Berikut ini diatas kode ]]></b:skin> :

.YBB-readmore {background:black;font-size:18px;color:#32BDE8;height:100px;width:100px;line-height:100px;position:absolute;z-index:999999;-moz-border-radius:200px;-webkit-border-radius:200px;border:8px solid rgba(255, 255, 255, 0.8 );margin-top:-10px;margin-left:170px;-webkit-box-shadow:0 1px 9px red;-moz-box-shadow:0 1px 9px red;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip: padding-box;opacity:0.9;-moz-transform: rotate(60deg);-webkit-transform: rotate(60deg);box-shadow:0 1px 9px blue;-webkit-transition: all 0.9s ease-in-out;-moz-transition: all 0.9s ease-in-out;-o-transition: all 0.9s ease-in-out;transition: all 0.9s ease-in-out;}

.YBB-readmore:hover {opacity:2;height:100px;width:100px;-webkit-transform:rotate(1080deg);-moz-transform:rotate(1080deg);-ms-transform:rotate(1080deg);-o-transform:rotate(1080deg);transform:rotate(1080deg);box-shadow:0 1px 9px red;}
.YBB-readmore a {color:#ffffff;font-family: 'Rancho', cursive;
text-shadow:0px 0px 1px #ffffff;font-size:18px}

• Lalu, Cari Kode </head> dengan menekan CTRL+F.
• Masukan Kode Berikut ini diatas kode </head>:

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='https://daftar-javascript-kami.googlecode.com/files/YBB%20ReadMore.js' type='text/javascript'/>

• Cari Kode <data:post.body/> dengan menekan CTRL+F.
• Ganti Kode <data:post.body/> dengan kode berikut 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='YBB-readmore' style='text-align: right;'><a expr:href='data:post.url'>Read More</a></span></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Note :
Jika Terdapat Kode <data:post.body/> yang ada dua atau lebih, ganti kedua atau lebih tersebut.

• Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses,

J_Cyber

Bagaimana sih sebenarnya membuat simbol ™ ? Terus terang aja sampai sekarang saya juga belum mengerti caranya. Namun untuk pengguna windows XP alhamdulilah saya telah mengerti caranya yakni dengan menekan dan menahan tombol ALT kemudian tekan 0, 1, 5, 3 secara cepat. Setelah anda menekan itu  maka akan muncul simbol ™ yang di harapkan. Nah sekarang permasalahan akan muncul jika anda menggunakan windows 7, karena saya juga menggunakan windows 7 dan mencoba cara di atas ternyata memang tidak bekerja. Bagaimana cara memasang simbol ™ di postingan menggunakan windows 7? Simak di bawah ini ya: