Tuesday, 24 March 2015

Menambah Read More Pada Blog 1


Note:
  • Untuk Template yang belum memiliki Read More
  • Review tampilan dashboard 2015

Langkah-Langkahnya sebagai berikut:
1. Pilih Template >> Edit HTML (lihat gambar)

2. Cari Kode </head>
(tekan Ctrl+F untuk mempermudah dalam pencarian kode), kemudian paste kode tepat diatas </head>


Kode Disini >>



<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 100;
img_thumb_width = 100;

</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>

Note:
  • summary_noimg = 250; Jumlah karakter yang ditampilkan bersamaan dengan image
  • summary_img = 250; Jumlah karakter yang ditampilkan tanpa image
  • img_thumb_height = 100; Tinggi image yang ditampilkan
  • img_thumb_width = 100; Lebar image yang ditampilkan

3. Cari Kode <data:post.body/> , kemudian timpa/ganti kode tersebut dengan kode dibawah ini


Kode Disini >>



<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:left'><a expr:href='data:post.url'>Read More :  <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>&lt;script src=&quot;/scahor.php?b=75376&amp;onlytitle=1&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</b:if>


4. Kemudian Simpan Template dan lihat hasilnya
Read More : Menambah Read More Pada Blog 1

Trik HTML- Melebarkan Kolom Posting dan sidebar di Blog

Note:
  • Untuk sample template yang saya edit adalah template yang terdiri dari 1 main-wrapper (kolom posting) dan 2 Sidebar (kanan kiri)
  • Review tampilan dashboard 2015

Langkah-langkahnya sebagai berikut:
1. Pilih Template >> Edit HTML (lihat gambar)


2. Pilih Panah (lihat gambar)
  •    Untuk pengaturan lebar kolom template biasanya di bagian ini.
 

3. Perlu diketahui, sebelum ke pokok permasalahan yakni pengaturan lebar kolom posting dan sidebar, Untuk:
  • #header-wrapper {
  • #outer-wrapper {
  • #footer {
Harus memilihi width/lebar yang sama.

Kemudian cari kode :
  • #header-wrapper {
Sesuaikan width-nya, misal dari 900px menjadi 1200px
  • #outer-wrapper {
Sesuaikan width-nya, misal dari 900px menjadi 1200px
  • #footer {
Sesuaikan width-nya, misal dari 900px menjadi 1200px


4. Selanjutnya, berikut untuk pengaturan lebar kolom posting dan sidebar

a. Pengaturan lebar kolom posting
  • #main-wrapper {
Sesuaikan width-nya, misal dari 440px menjadi 540px

b. Pengaturan lebar sidebar kiri
  • #sidebar-wrapper {
Sesuaikan width-nya, misal dari 220px menjadi 320px

c. Pengaturan lebar sidebar kanan
  • #newsidebar-wrapper {
Sesuaikan width-nya, misal dari 220px menjadi 320px


5. Kemudian Simpan Template dan lihat hasilnya


SELAMAT MENCOBA
HAPPY BLOGING


Read More : Trik HTML- Melebarkan Kolom Posting dan sidebar di Blog

Monday, 16 March 2015

Membuat Widget Sosial Media Tampil di Blog

Ratna Purnama Sari - Always For You - Membuat Widget Sosial Media Tampil di Blog
Untuk sample lihat peace in heart
Pertama pilih "Tata Letak" >> "Tambahkan Gadget" >> "HTML/Javascript". Kemudian copy paste kode dibawah ini.



Kode Disini >>




<a href="LINK-Facebook" style="position: fixed; left: 2px; top: 100px;" target="_blank">
<img border="0" heigth="48" src="ICON-Facebook" title="Facebook" width="48" /></a>

<a href="LINK-Twitter" style="position: fixed; left: 2px; top: 150px;" target="_blank">
<img border="0" heigth="48" src="ICON-Twitter" title="Twitter" width="48" /></a>

<a href="LINK-Instagram" style="position: fixed; left: 2px; top: 200px;" target="_blank">
<img border="0" heigth="48" src="ICON-Instagram" title="Instagram" width="48" /></a>

Note:
1. Untuk tulisan warna merah, silahkan diisi dengan link id baik twitter/facebook/instagram.
2. Untuk tulisan warna hijau, apabila ingin menambah sosial media silahkan copy paste dua baris kode tersebut dan jangan lupa untuk mengubah position px (warna hijau).
3. Untuk tulisan warna kuning, silahkan diisi dengan link icon kamu silahkan lihat google picasa atau cari icon disini

SELAMAT MENCOBA & HAPPY BLOGING
Read More : Membuat Widget Sosial Media Tampil di Blog

Thursday, 12 March 2015

Menampilkan File Google Drive Ke Posting Blog

Menampilkan File Google Drive Ke Posting Blog
Untuk memudahkan share dokumen/file ke publish khususnya blogger, berikut kode yang harus di copy paste. Klik Sample


Kode Disini >>

<iframe height="550" src="https://drive.google.com/file/d/0Bw9gEkCVTmj9R0g0b1BWNHRoTUk/preview" width="440"></iframe>


Keterangan Kode: 
height= Mengatur tinggi
width= Mengatur lebar
https://drive.google.com/file/d/0Bw9gEkCVTmj9R0g0b1BWNHRoTUk = Link file pada google drive

Ada beberapa catatan agar kode tersebut berhasil di publish dengan baik dan sempurna.
1. Pertama, copy paste kode pada tab "HTML", kemudian klik tab "Compose" untuk melihat apakah kode tersebut berhasil. Karena beberapa kali saya langsung copy paste pada tab "Compose" namun kode tidak respon. (((lihat gambar))

copy paste kode pada tab "HTML"
2. Kedua, cara memperoleh link file pada google drive:
 
  •  Muncul tab baru, kemudian pilih "lanjutkan"
 

  • Muncul tab baru, lalu ubah pengaturan pribadi menjadi publish, klik "ubah" (3). Pilih "Aktif - Publisk di Web"(5) lalu "simpan"(6)
  • Keterangan no (4) adalah link file google drive, tanda merah adalah link file https://drive.google.com/file/d/0B6R5O99hPJDTQmZQd2dqRk02Mzg/view?usp=sharing

HAPPY BLOGING N SELAMAT MENCOBA

Read More : Menampilkan File Google Drive Ke Posting Blog

Tuesday, 10 March 2015

Trik HTML - Tombol Spoiler (Show Hide) Diposting Blog (3)

Membuat tampilan seperti dibawah ini
Spoiler: Show Hide

Berikut Kodenya


Kode Disini >>



<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px; text-align: center;">
<span style="font-weight: bold;">Kode Disini &gt;&gt; </span><input onclick="if  (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display  != '') {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display  = ''; this.innerText = ''; this.value = 'Hide'; } else {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display  = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

((( PASTE ISI DISINI )))
</div>
</div>
</div>

SELAMAT MENCOBA
Read More : Trik HTML - Tombol Spoiler (Show Hide) Diposting Blog (3)

Solusi Posting Kode HTML di Blog - Blogcrowds (Parse HTML)

Kamu pengen posting kode HTML/JS atau yang lainya pada blog, namun kamu bingung bagaimana caranya. Mungkin sebagian blogger sudah tau, namun alangkah baiknya saya membuat post "Solusi Posting Kode HTML di Blog" untuk blogger newbie. Kadang juga saya lupa apa nama web yang biasa saya pakai, maka post ini solusi juga buat saya

Anda bisa langsung googling dengan kata kunci "Parse" "Parse HTML" dan akan muncul banyak sekali web penyedia parse HTML.

Saya biasanya memakai "Blogcrowds" Berikut linknya :
 

Silahkan langsung copy paste kode HTML anda kemudian "PARSE", dan lihat hasilnya. Hasil dari parse tersebut bisa langsung kamu copy paste lagi di blog kamu. Dan eng i eng lihat hasilnya, setelah kamu publish.


SELAMAT MENCOBA
Read More : Solusi Posting Kode HTML di Blog - Blogcrowds (Parse HTML)

Membuat Tab Komentar Facebook pada Blog

Tampilan sebelum ditambah tab komentar facebook

Tampilan sesudah ditambah tab komentar facebook
 Langkah pertama ialah copy paste kode tepat dibawah <div class='comments' id='comments'>
  • Seperti gambar dibawah ini

Kode Disini >>


<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://icons.iconarchive.com/icons/uiconstock/socialmedia/512/Facebook-icon.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='430'/></b:if></div>
<div class='comments comments-page' id='blogger-comments-page'>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='IDFANPAGEFACEBOOK' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);$(selectTab).removeClass(&quot;inactive-select-tab&quot;);$(&quot;.comments-page&quot;).hide();$(selectTab + &quot;-page&quot;).show();}</script>

<style>.comments-page { background-color: #000000;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #000000;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #000000;}.inactive-select-tab { background-color: #000000;}</style>
=================================================

Selanjutnya "simpan template" dan silahkan lihat hasilnya.

  • width='430' : Mengatur lebar kolom komentar
  • http://icons.iconarchive.com/icons/uiconstock/socialmedia/512/Facebook-icon.png : Image Icon Logo facebook
  • http://www.blogger.com/img/icon_logo32.gif: Image Icon Logo Blogger
  • IDFANPAGEFACEBOOK: Id Fans Page Facebook Kamu
  • background-color: #000000 : Warna Background untuk kolom komentar
  • background-color: #000000 : Warna tab aktif
  • background-color: #000000 : Warna tab ketika disentuh kursor
  • background-color: #000000 : Warna tab non-aktif
SELAMAT MENCOBA
Read More : Membuat Tab Komentar Facebook pada Blog

Monday, 9 March 2015

All About Blog Accessories

Read More : All About Blog Accessories

  © Ratna-Always For You The Transformers by Blog Tips And Trick 2009