Pasang Slideshow dengan jQuery

Pada tutorial kali ini saya akan membahas tentang cara "Pasang Slide Show dengan jQuery". Blog simple, menurut pengunjung jelek, tetapi jika dipasang Slide Show jQuery ini blog tersebut tampak seperti blog professional yang kaya akan penampilan menarik. Sebenarnya faktor utama yang harus diperhatikan pada blog adalah tampilan yang menarik, rapih, seo, dan cepat saat loading, hal tersebut modal awal blog jika ingin banyak pengunjung yang nongkrong di blog tersebut. Biasanya pengunjung blog menyukai blog yang kaya akan isi dan konten blog, maksudnya isi dari blog tersebut berguna, berbobot, dan rapi pada penulisan artikel. Pengunjung blog juga suka akan blog yang menarik dari segi design, slideshow, navigasi, Css, widget yang ditata rapih, jika blog anda seperti itu maka tak salah lagi pengunjung pun akan betah berlama-lama di blog anda. Tutorial tentang Slideshow ini juga bisanya termasuk kriteria pengunjung yang arogan.

Langkah-langkahnya sebagai berikut :

  • Tidak lupa untuk selalu Login ke Blogger anda,
  • Pilih "Template" lalu  pilih "Edit HTML",
  • Jangan lupa untuk selalu ceklist "Expand Templates Widget" jika ingin mengedit HTML,
  • Selanjutnya, gunakan ctrl-F untuk mencari kode di bawah ini,
]]></b:skin>
  • Letakan kode CSS di bawah ini sebelum atau di atas kode yang sudah anda temukan,

#slider {
background:#101010;
height: 153px;
text-align:center;
overflow: hidden;
position: relative;
margin: -5px 0px;
}


#mover {
width: 600;
position:absolute;
overflow:hidden;
}


.slide {
padding: 15px 0px;
width: 1000px;
float: left;
position: relative;
height:130px;
}


.slide h2 {
font-family:Georgia, Helvetica, Sans-Serif;
font-size: 18px;
font-weight:bold;
text-align:left;
color: #FFFF00;
padding:0px 0px 0px 0px;
margin:0px 0px;
width:440px;
overflow:hidden;
}


.slide h2 a:link, .slide h2 a:visited {
color:#E1771E;
background-color: transparent;
}


.slide h2 a:hover {
color: #ff0000;
background-color: transparent;
}


span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 200px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #FFFFFF;
font-size: 12px;
text-align:left;
font-family: Georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 440px;
padding:0px 0px 0px 0px;
margin:0px 0px;
}


.slide img {
position: absolute;
top: 20px;
left: 225px;
background:;
padding:10px 10px;
}


#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 1000px;
right: -125px;
color: #FF0000;
padding: 3px 8px;
font-size: 14px;
font-weight:bold;
text-transform: uppercase;
z-index: 1000;
}

  •  Selanjutnya, silahkan cari kode di bawah ini,
</head>
  • Letakan kode di bawah ini sebelum atau di atas kode yang sudah anda temukan,
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhoverb"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

  • Simpan Template.


Langkah Kedua.

  • Sekarang anda tinggalkan "Edit HTML" dan beralih ke "Layout",
  • Pilih "Tambah Gadget" lalu cari "Javascript/HTML",
  • Selanjutnya, letakan kode di bawah ini kedalam "Javascript/HTML" tersebut,

<!-- Casing -->
<div id="casing">
<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="ALAMAT URL">JUDUL SLIDE 1</a></h2>
<p>isi artikel slide 1</p>
<img src="LINK GAMBAR"/>
</div>
<div class="slide">
<h2><a href="ALAMAT URL">JUDUL SLIDE 2</a></h2>
<p>isi artikel slide 2</p>
<img src="LINK GAMBAR"/>
</div>
<div class="slide">
<h2><a href="ALAMAT URL">JUDUL SLIDE 3</a></h2>
<p>isi artikel slide 3</p>
<img src="LINK GAMBAR"/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
<div class="clear"/></div></div>

Note: Silahkan anda isi "Alamat Url" , "Link Gambar" , "Judul Slide" , "Isi artikel" sesuai dengan anda.
  • Terkahir, Save.

Cukup sekian mengenai penerapan slideshow pada blog, semoga artikle ini dapat bermanfaat.
Selamat Mencoba.

Pasang Facebook Like Button Pada Postingan

Tutorial kali ini saya akan membahas tentang "Pasang Facebook Like Button Pada Postingan". Facebook like adalah salah satu jejaring social yang menyediakan gadget berbentuk like/suka yang bisa dipasang di blogspot. Jika seseorang menyukai suatu artikel pada blog dengan mengklik facebook like button, maka artikel tersebut sudah otomatis masuk ke wall facebook anda apabila sebelumnya anda sudah login facebook. Keuntungan lainnya dari facebook like button ini, cara alternatif untuk meningkatkan trafik blog. Kalian bisa lihat contoh facebook like button ini tepat di bawah posting/artikel. Jika anda ingin menambahi facebook like button ini, mari kita lihat tutorial di bawah ini dengan seksama.

Langkah-langkah memasang facebook like button adalah, 

  • Tidak lupa untuk Login ke blogger anda,
  • Pilih "Template" lalu pilih "Edit HTM",
  • Jangan lupa untuk selalu ceklist "Expand Widgets Template",
  • Selanjutnya, gunakan ctrl-F untuk mencari kode di bawah ini,
<data:post.body/>
  • Selanjutnya, letakan kode di bawah ini sesudah/di bawah kode di atas,
<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; 
+ data:post.url + &quot;&amp;action=like&amp;layout=standard&amp;
show_faces=false&amp;width=450&amp;font=arial&amp;colorscheme=light&quot;' 
allowTransparency='true' frameborder='0' scrolling='no' style='border:none; 
overflow:hidden; width:450px; height:25px;'/>
Note : Cara di atas menjelaskan dimana anda meletakan facebook like button di bawah posting.

Jika anda ingin meletakan facebook like button tepat di atas posting maka caranya,

  • Gunakan ctrl-F untuk mencari kode di bawah ini,
<data:post.body/>
  • Selanjutnya, letakan kode di bawah ini sebelum/di atas kode yang sudah anda temukan,
<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; 
+ data:post.url + &quot;&amp;action=like&amp;layout=standard&amp;
show_faces=false&amp;width=450&amp;font=arial&amp;colorscheme=light&quot;' 
allowTransparency='true' frameborder='0' scrolling='no' style='border:none; 
overflow:hidden; width:450px; height:25px;'/>
    Note : Cara di atas menjelaskan dimana anda meletakan facebook like button di atas posting.
    • Terakhir, Save Template.
    Sekian tutorial dari koisine blog, semoga artikel ini dapat bermanfaat bagi anda yang telah membaca artikel ini.


    Terima Kasih dan Selamat Mencoba.

    Simple Dinamis Blogger Template

    Simple Dinamis Blogger Template - Template yang akan saya share bernama Simple Dinamis, template ini sangat simple dan dinamis dan cepat untuk waktu loading. Template Simple Dinamis iini juga mempunyai fitur-fitur tersendiri,

    1. 2 Kolom Blogger Template,
    2. Sidebar berada di sebelah kanan,
    3. Dilengkapi Meta Tag,
    4. Ditambahi efek Zoom pada gambar,
    5. Ditambahi emoticons pada kotak komentar,
    6. Dapat dibuka oleh Mozilla, Chrome, IE, Flock,
    Bagaimana menurut anda, menarik dan simple.



    Anda harus mengedit beberapa kode di bawah ini,

    Kode Kotak Komentar,

    <form method="get" action="/search">
    <div class="searchform">
    <input type="hidden" name="amount" value="0" />
    <input type="hidden" name="blogid" value="1" />
    <input name="query" alt="Keywords to search" class="formfield" 
      size="10" maxlength="60" accesskey="4" value="" />
    <input type="submit" alt="Search" value="Search" class="formbutton" />
    </div>
    </form>
     
     
    Code to display recent comments :

    <ul><script style="text/javascript">
    function showrecentcomments(json) {
    for (var i = 0; i < 5; i++) {
    var entry = json.feed.entry[i];
    var ctlink;

    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    ctlink = entry.link[k].href;
    break;
    }
    }
    ctlink = ctlink.replace("#", "#comment-");
    var ptlink = ctlink.split("#");
    ptlink = ptlink[0];
    var txtlink = ptlink.split("/");
    txtlink = txtlink[5];
    txtlink = txtlink.split(".html");
    txtlink = txtlink[0];
    var pttitle = txtlink.replace(/-/g," ");
    pttitle = pttitle.link(ptlink);
    if ("content" in entry) {
    var comment = entry.content.$t;}
    else
    if ("summary" in entry) {
    var comment = entry.summary.$t;}
    else var comment = "";
    var re = /<\S[^>]*>/g;
    comment = comment.replace(re, "");

    document.write('<li>');
    document.write('<a href="' + ctlink + '"><strong>' + entry.author[0].name.$t + '</strong></a>, ');
    if (comment.length < 100) {
    document.write(comment);
    }
    else
    {
    comment = comment.substring(0, 100);
    var quoteEnd = comment.lastIndexOf(" ");
    comment = comment.substring(0, quoteEnd);
    document.write(comment + '');
    }
    }
    document.write('</li>');
    }
    </script>
    <script src="http://simpledinamis.blogspot.com/feeds/comments/default?alt=
    json-in-script&callback=showrecentcomments">
    </script></ul>
     
    Note : Ganti tulisan yang berwarna biru dengan alamat blog anda, 

    Pasang Navigasi Horizontal ala O-om dot com

    Pada postingan kali ini saya akan membahas cara "Pasang Navigasi Horizontal ala O-om dot com". 
    Banyak tutorial tentang memasang menu navigasi horizontal dengan berbagai bentuk dan berbagai design yang menarik. Bentuk navigasi pada postingan kali ini sama seperti yang dimiliki oleh blog O-om, blog yang membahas tutorial blogger, seo, dll. Pastinya banyak yang ingin memiliki template seperti blog tersebut karena, seo dan menarik. Saya akan berbagi setengan dari template tersebut yaitu navigasinya yang simple dan dinamis, berbeda dengan navigasi ini ditambahi dengan menu dropdown,

    Langsung saya tutorialnya,

    • Login ke Blogger anda,
    • Silahkan menuju "Template" lalu "Edit HTML",
    • Jangan lupa centang "Expand Widgets Template",
    • Gunakan ctrl-F untuk mencari kode di bawah ini,
    ]]></b:skin>
    • Selanjutnya letakan kode CSS di bawah ini sebelum/diatas kode yang sudah anda temukan,

    /*-- (Menu/Nav) --*/
    #nav-element{width:900px; margin:0; padding:0px 0 0px 0; float:center}
    #nav{background:#424242; height:32px; padding:4px 0 0; margin-bottom:0px; clear:both; margin:0 auto; -webkit-border-radius: 7px;-moz-border-radius: 7px; border-radius: 7px;}
    #nav-left{float:left; display:inline; width:660px; padding-left:6px; padding-top:1px}
    #nav-right{float:right; display:inline; width:200px; padding-top:3px; padding-right:15px}
    #nav ul{float:left;list-style:none;margin:0;padding:0;font:1.0em Verdana,Arial,Helvetica,sans-serif;font-weight:bold}
    #nav li{list-style:none;margin:0;padding:0}
    #nav li a,#nav li a:link,#nav li a:visited{display:block; color:#fff; margin:1px 4px; padding:4px 4px; text-decoration:none;}
    #nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{color:#fff; background-color:#999; margin:1px 3px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px}
    #nav li a:hover,#nav li a:active{background-color:#222; color:#fff; background-color:#999; margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px;text-decoration:none}
    #nav li li a,#nav li li a:link,#nav li li a:visited{background:transparent;color:#fff;font-size:12px;text-transform:none;float:none;margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px;}
    #nav li li a:hover,#nav li li a:active{background-color:#222; color:#fff; background-color:#999; margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px;}
    #nav li{float:left;padding:0}
    #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:167px; background: #424242;margin:0px; padding:4px; -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;}
    #nav li ul a{width:156px;margin-bottom:2px;}
    #nav li ul ul{margin:-32px 0 0 171px}
    #nav li:hover ul ul,#nav li:hover ul ul ul,#nav li.sfhover ul ul,#nav li.sfhover ul ul ul{left:-999em}
    #nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li li li.sfhover ul{left:auto}
    #nav li:hover,#nav li.sfhover{position:static}

    • Selanjutnya gunakan ctrl-F untuk mencari kode di bawah ini,
    <div id='outer-wrapper'><div id='wrap2'>
    • Silahkan anda letakan kode di bawah ini tepat dibawah/sesudah kode yang sudah sobat temukan,


    <div id='nav-element'>
    <div class='widget-content'>
    <div id='nav'>
    <div id='nav-left'>
    <ul>
    &lt;li&gt;&lt;a href=&quot;/&quot;&gt;&lt;img src=&quot;http://img409.imageshack.us/img409/2696/depanikon.png&quot; style=&quot;padding: 0px;&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/li&gt;
    <li><a href='#'>Page</a><ul>
    <li><a href='#'>Page</a>
    <ul>
    <li><a href='#'>Page</a></li>
    <li><a href='#'>Page</a></li>
    </ul>
    </li>
    <li><a href='#'>Page</a></li>
    <li><a href='#'>Page</a></li>
    </ul></li>
    <li><a href='http://koisine.blogspot.com'>Belajar Blogger</a></li>
    </ul>
    <script language='javascript'>setPage()</script>
    </div>
    <div id='nav-right'>
    <div id='tsrc-m'>
    <div id='src-m'>
    <form action='/search' id='searchform' method='get' name='searchform'>
    <input class='keyword' id='s-m' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;search font..&quot;;}' onfocus='if (this.value == &quot;search font..&quot;) {this.value = &quot;&quot;}' type='text' value='search font..'/>
    <input src='http://img140.imageshack.us/img140/1651/cariikon.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/>
    </form>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>


    Note : Sesuaikan dengan blog anda,
    Tanda # : Silahkan kalian isikan dengan alamat/link sesuai dengan blog anda,
    Kata Page : Silahkan kalian tulis nama/judul sesuai dengan alamat/link yang ada pada blog anda,
    • Terakhir, Simpan Template.
    Sekian dahulu tutorial dari Koisine Blog, semoga artikel itu berguna dan dapat dipraktekan oleh anda yang membaca postingan ini,
    Terima Kasih dan Selamat Mencoba.

    Mengedit Tag Heading Title Agar SEO Friendly

    Pada postingan kali ini saya akan membahas tentang SEO Blogspot mengenai "Cara Mengedit Heading Title Blog". Trik ini sudah banyak dipraktekan oleh blogger proffesional yang menyebabkan artikel pada blognya terindex oleh mesin pencari. Perlu diketahui bahwa sebagian besar pemilik blog ingin artikelnya masuk kedalam mesin pencari dengan cepat, tetapi ada juga yang artikelnya susah untuk terindex mesin pencari. Trik ini dengan <h1> untuk judul artikel sangat disegani oleh mesin pencari/Google, karena Google lebih suka mengindex judul artikel berTag <h1>. Kebanyakan template yang beredar pada situs penyedia template menggunakan tag <h2> untuk judul artikel, sedangkan tag <h1> digunakan untuk judul header blog. Pada trik ini saya harapkan. segeralah mengedit heading pada blog kalian supaya artikel kalian bersahabat dengan mesin pencari.

    Berikut cara-cara mengedit tag heading,

    • Pastikan kalian untuk Login ke Blogger,
    • Segera masuklah ke "Template" lalu pilih "Edit Html",
    • Tidak lupa untuk ceklist "Expand Widgets Template",
    • Gunakan ctrl-F untuk mencari kode-kode berikut ini,
    Kode Pertama
    <h3 class='post-title entry-title'>

    Kode Kedua
    <h2 class='post-title entry-title'>

    Note : Dalam mencari kode diatas, sesuaikanlah dengan template kalian, karena setiap template berbeda-beda.

    Untuk memperjelas, berikut adalah Heading Title yang terdapat pada blog saya,

    <b:if cond='data:post.title'>
    <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h3>
    </b:if>

    Note : Silahkan cari tag Heading yang mirip-mirip seperti di atas,

    Setelah menemukan kode di atas, silahkan kalian mengganti tulisan yang berwarna merah menjadi / Heading <h3> dengan </h3> menjadi <h1> dan </h1>.

    Sehingga menjadi seperti di bawah ini,

    <b:if cond='data:post.title'>
    <h1 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h1>
    </b:if>

    Note : Kode di atas/heading sudah diedit menjadi <h1> untuk judul artikel.

    Cara Kedua,


    Setelah mengedit heading sesuai dengan cara yang sudah diterapkan di atas, sekarang ikuti cara terakhir berikut ini,


    • Gunakan ctrl-F untuk mencari kode di bawah ini,
    ]]></b:skin>
    • Letakan kode css di bawah ini sebelum/diatas kode tersebut,
    h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }
    • Simpan Template.

    Cukup sekian untuk " Mengedit Tag Heading Title Agar SEO Friendly", saya rasa caranya cukup mudah, dan kalian pasti bisa melakukannya.

    Untuk membuat blog kalian semakin SEO, sebaiknya kalian tambahkan Meta Tag Otomatis berikut,


    Selamat Mencoba.
    Download Tune Up 2012 Full Version

    Menghilangkan Link Pada Judul Posting/Artikel

    Sudah lama tidak posting karena banyak urusan di luar dunia blogger, rasanya jari-jari gatal karena lama tak mengetik, pada postingan kali ini tutorial blogger yang akan saya buat tentang menghilangkan link pada judul artikel. Apa harus kita praktekan trik ini kedalam template ? Harus, menurut pengalaman saya setelah mengedit link judul artikel menjadi mati, tak trasa artikel yang baru tak buat, sudah masuk ke si mbah google, sepertinya karena judul link yang mati ini, tetapi sangat berguna untuk melakukan trik ini pada template yang menggunakan readmore pada homepage. Langsung saja tutorialnya tanpa basa basi,

    Langkah - Langkahnya ! 

    • Login ke blogger kalian,
    • Pilih "Template" - "Edit HTML",
    • Jangan lupa centang "Expand Widgets Template",
    • Gunakan ctrl-F untuk mencari kode <h2/> atau <h1/> sesuaikan dengan template kalian,
    Untuk memperjelas kode HTML, silahkan cari kode seperti di bawah ini,
    Kode dengan <h2/> untuk judul artikel,


    <b:if cond='data:post.title'>
    <h2 class='post-title entry-title'><b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h2>


    Berikutnya, kode dengan <h1/> untuk judul artikel,

    <b:if cond='data:post.title'>
    <h1 class='post-title entry-title'><b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h1>


    Selanjutnya, jika sobat sudah menemukan kode seperti di atas,
    Silahkan dengan kode-kode di bawah ini, sesuaikan dengan template kalian, <h2/> atau <h1/>

    Silahkan ganti kode yang sudah sobat temukan dengan kode di bawah ini,
    Kode dengan <h2/> untuk judul artikel,


    <b:if cond='data:post.title'>
    <h2 class='post-title entry-title'>
    <b:if cond='data:blog.pageType == "item"'>
    <b:if cond='data:post.link'>
    <data:post.title/>
    <b:else/>
    <b:if cond='data:post.url'>
    <data:post.title/>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    <b:else/>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </b:if>
    </h2>

    Selanjutnya, kode dengan <h1/> untuk judul artikel,



    <b:if cond='data:post.title'>
    <h1 class='post-title entry-title'>
    <b:if cond='data:blog.pageType == "item"'>
    <b:if cond='data:post.link'>
    <data:post.title/>
    <b:else/>
    <b:if cond='data:post.url'>
    <data:post.title/>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    <b:else/>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </b:if>
    </h1>


    Saya rasa sekian dulu tutorial untuk Menghilangkan Link Pada Judul Posting/Artikel,
    Semoga artikel ini bermanfaat..



    Selamat Mencoba.

    Cara Memasang Social Bookmark di Bawah Judul Artikel/Posting

    Pada tutorial kali ini Kang Koisine akan membahas tentang penerapan Social Bookmark pada blogspot dengan artikel yang berjudul "Cara Memasang Social Bookmark di Bawah Judul Artikel/Posting". Rasanya sangat kurang sekali jika blog tidak dilengkapi dengan aksesoris yang satu ini, sebut saja Social Bookmark. Social Bookmark ini sangat penting pada blog, selain membagikan artikel ke beberapa jejaring sosial, Social Bookmark ini juga mengaruh terhadap rank atau serp, Mengapa ? Kita ambil salah satu contoh jejaring sosial facebook. Umumnya artikel pada blog kadang kala kita membaginya ke facebook, dan siapa saja yang melihat artikel yang telah kita bagikan ke facebook berarti mereka akan mengklik artikel tersebut apabila artikel menarik dan buat penasaran, nah disinilah letak seonya, karena artikel yang diklik itu melalui facebook dan pastinya facebook mempunyai rank yang tinggi yang bisa membantu blog kita.

    Social Bookmark yang akan saya bagikan ini tampilannya menarik dan sama seperti apa yang kalian lihat di bawah judul artikel, dan sub social bookmark ini meliputi facebook share, twitter share, digg share, stumble share, dll. Sebelumnya, Social Bookmark ini telah diterapkan oleh O-om.com yang diletakan sama di bawah judul artikel, apa kalian tertarik dan ingin mempraktekannya ?

    Untuk kalian yang ingin tahu tampilan Social Bookmarknya, lihat gambar di bawah ini,


    Kita mulai dengan langkah awal,

    • Login ke BLOGGER kalian,
    • Masuk ke "Edit Template",
    • Beri centang "Expand Widget Templates"
    • Gunakan ctrl-F untuk mencari kode di bawah ini,
    ]]></b:skin>
    • Letakan kode CSS berikut ini sebelum/diatas kode di atas,

    /* SET FACEBOOK LIKE AND BOOKMARK ON POST */
    .icn-bm {float:right; padding-top:9px; border:none; padding-right:10px}
    .icn-bm h4{color:#333; font-family:'Helvetica Neue',Arial,sans-serif; font-size:16px !important; font-weight:bold}
    .icn-sh{padding-top:2px}
    .icn-sh img{width:16px; height:16px; border:none; margin:0 3px}
    .fb-like{background:#FFFFD7;padding-left:10px; background-image:none; border:1px solid #FFFF00; margin-bottom:15px; padding-top:10px}
    .fb-like iframe{margin-bottom:5px}
    .fb-like h4{color:#333; font-family:'Helvetica Neue',Arial,sans-serif; font-size:16px !important; font-weight:bold}

    •  Gunakan ctrl-F lagi untuk mencari kode di bawah ini,
    <data:post.body/>
    • Letakan kode HTML di bawah ini sebelum kode di atas,
    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <div class='icn-bm '>
    <!--FECEBOOK LIKE AND SOCIAL BOOKMARK-->
    <h4>Do you want to share?</h4>
    <div class='icn-sh'>
    <a href='/feeds/posts/default/' rel='nofollow' target='_blank' title='Subscribe to RSS'><img alt='' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmco8at3fEtChomfTo0DomPETW4BeOxYN_88vbJym4v3fjkZ2EuzXY9mUv-n2q3VGE89RDU9pDO3Efz2c4Yzx_Gf1Yx4LgN-K6tSp52TlzpdwUxnH2E8KRD0zazilPqeLcc-0261Z30k0/s400/feed.png' width='16'/></a>
    <a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Facebook'><img alt='' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEVAwI6HPvljl5LLqHO_XMvRIwVnCBRadpdmXfLXcbkx5KnCkCQEFHMyTShJJ4duRAWPQQ_Zcyx_MhM_0ah5KLTaHkX1lKZ7HIfci0rkHLwssLiE_dBHSGuAlom_0IVMIJw3aEJm7VCTU/s400/facebook.png' width='16'/></a>
    <a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Twitter'><img alt='' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaSZmjzM6kFWENYNvQn0MzBcBT3pF64nb5by7Wx6V6PclB5JHTG5kfraa3rweVmn1nskZgKnF7PtBK8TsKWQY81E3rxSHFSVdeY04wxnYvVjWyPh5AlULLN10Hu8rTtrp6erjzTZDRF6A/s400/twitter.png' width='16'/></a>
    <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Add to Delicious'><img alt='' border='0' height='16' src='http://3.bp.blogspot.com/_C6KkooKXCEw/S9rnmAvSxJI/AAAAAAAAFf8/8SYH5xUXMtI/s400/delicious.png' width='16'/></a>
    <a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Digg This Post'><img alt='' border='0' height='16' src='http://1.bp.blogspot.com/_C6KkooKXCEw/S9rnmka6ZYI/AAAAAAAAFgE/QAHNU23FdN0/s400/digg.png' width='16'/></a>
    <a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Stumble This Post'><img alt='' border='0' height='16' src='http://2.bp.blogspot.com/_C6KkooKXCEw/S9rnnDHl5xI/AAAAAAAAFgM/HhpgfRRssBY/s400/stumbleupon.png' width='16'/></a>
    </div></div>

    <div class='fb-like' style='clear: none;'>
    <h4>Do you like this story?</h4>
    <!-- AddThis Button BEGIN -->
    <div class='addthis_toolbox addthis_default_style '>
    <a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
    <a class='addthis_button_tweet'/>
    <a class='addthis_counter addthis_pill_style'/>
    <script type='text/javascript'>var addthis_config = {&quot;data_track_clickback&quot;:true};</script>
    <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=sodiyc' type='text/javascript'/>
    <!-- AddThis Button END -->

    </div></div>
    </b:if>
    <!--END FECEBOOK LIKE AND SOCIAL BOOKMARK--> 

    Note :
    Jika sobat menggunakan fitur "Readmore" carilah kode <data:post.body/> dan pilih yang kedua,
    • Terakhir, Simpan Template.
    Sekian tutorial dari saya, semoga bermanfaat,

    Penulis : Kang Koisine

    Cara Membuat Text Style Untuk Judul Blog

    Cara Membuat Text Style Untuk Judul Blog - Kali ini saya akan membuat postingan atau tutorial blogger sesuai dengan request sobat blogger yang meruquest melalui soutmix, dia merequest cara membuat Text Style untuk Judul Blog, contoh gambarnya seperti di bawah ini,





    Biasanya judul pada header blog menggunakan font standar, nah pada postingan ini Kang Koisine ingin berbagi trik untuk mengedit dan membuat Text Style untuk Judul blog,

    Begini caranya,

    Note : Backup dahulu template sobat untuk mengurangi kesalahan yang terjadi.
    • Langsung masuk ke "Edit Template" jangan lupa ceklist "Expand Template Widget",
    • Setelah itu, silahkan sobat cari kode #Header 1 atau kode yang mirip seperti di bawah ini,
    #header h1 {
      font-size:……..
      dan el-el
    }
    • Selanjutnya, ganti kode yang sudah sobat temukan dan ganti dengan kode di bawah ini,
    #header p {margin:3px 0 20px}
    #header h1 {
    font: bold 1.75em "Trebuchet MS", Arial, Helvetica, sans-serif;
    letter-spacing: -1px; padding: 2px 0 0 0px;
    margin: 0; background: inherit;
    }
    h1 .red{ color: #DF5900;background: inherit;}
    Note : Silahkan gunakan inspirasi sobat untuk mengubah kode di atas agar semakin menarik.

    • Selanjutnya, cari kode html yang mirip seperti di bawah ini,
    <div id='header-inner'>
    <div class='titlewrapper'>
    <h1 class='title'>
    <b:include name='title'/>
    </h1>
    </div>
    <b:include name='description'/>
    </div>
    • Selanjutnya, ganti kode yang sudah sobat temukan dan ganti dengan kode html di bawah ini,
    <div id='header-inner'>
    <div class='logo'>
            <h1><a href='http://www.blogsobat.blogspot.com/' title='tulisan sobat'>tulisan sobat <span class='red'>tulisan sobat</span><sup>tulisan sobat</sup></a></h1>
                <p>tulisan sobat</p>
          </div>
    </div>
    Note : Silahkan sobat ganti tulisan yang berwarna merah.
    • Terakhir, Save Template.
    Untuk kode, silahkan sobat cari kode yang mirip seperti kode yang sudah tertera di atas, kode akan berbeda pada setiap template,

    Terima Kasih..

    Cara Membuat Textarea dengan Background Kertas

    Cara Membuat Textarea dengan Background Kertas - biasanya Textarea sangat berguna untuk sobat yang suka membuat tutorial yang mengutamakan script atau kode Html yang panjang. Berbeda dengan Textarea yang satu ini, textarea ini menggunakan tampilan dan background yang menarik jadi enak untuk dilihat,


    Cara membuatnya,
    • Login ke Blogger,
    • Selanjutnya, Template - Edit Template HTML,
    • Gunakan ctrl-F untuk mencari kode seperti di bawah ini,
    ]]></b:skin>
    •  Selanjutnya, letakan kode HTML di bawah ini sebelum kode yang sudah sobat temukan,
    /* scroll ----------------------------------------------- */ .scrollboxs{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnStABwnZNHZYF_EimrUnSu1KEFE_N7T8RVYAhkzuLxHdVMEBp1DWc_DhnwqpJDMc4mOGcX99E7nQ_nTNtUEF0gqx5ZaG-UnfsuQP0l1UHY4ZpHsDbyv2HAxUJTRk9eNnx6PL75fvDH6c/s1600/papers.jpg) repeat; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#cccccc'); color: #940f04; color:rgba(0,0,0,0.9); border:1px solid rgba(0,0,0,0.5); -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px; -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px; -webkit-box-shadow: 3px 3px 5px #000000; -moz-box-shadow: 3px 3px 5px #000000; -webkit-border-bottom-left-radius:10px; text-shadow:1px 1px 0px rgba(255,255,255,0.8); text-decoration: none; padding: 3px; overflow: auto; width: auto; height: 150px; padding-top:3px; padding-bottom:3px; } .scrollboxs a, .scroll:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk_xZ2dOIJCC98SRC4vkPMme_Z2pFF2utcdhb7JO5fjr1DaZiqd3fx9j1g7jVxb_W1yE2eUU_vxC6GuDlX0c-2SP7EIDmcVC6nilKeqS5bGvxv5mtVw3VOOBJNoWJJ3YokqyLXxqmmWXVM/s1600/papers.jpg) repeat; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#f3f3f3'); color:#000; color:rgba(0,0,0,0.9); border:1px solid rgba(0,0,0,0.5); -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px; -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; -moz-border-radius-bottomleft:10px; -webkit-box-shadow: 3px 3px 5px #2E2E2E; -moz-box-shadow: 3px 3px 5px #2E2E2E; -webkit-border-bottom-left-radius:10px; text-shadow:1px 1px 0px rgba(255,255,255,0.8); text-decoration: none; padding: 3px; overflow: auto; width: auto; height: 150px; padding-top:3px; padding-bottom:3px; }
    Keterangan :

    width: auto; - Lebar Textarea, bisa diubah sebagai contoh 200px;  
    height: 150px; - Tinggi Textarea, bisa diubah

    Selanjutnya untuk pemanggilannya gunakan Html Posting atau HTML di posting
    Dan kode pemanggilannya sebagai berikut,

    <div class"scrollboxs">masukan text atau kode html disini</div>
    Selamat mencoba.

    Cara Membuat Link atau Tulisan Tampil Disamping Sidebar

    Cara Membuat Link atau Tulisan Tampil Disamping Sidebar - Di hari yang penuh rahmat ini Kang Koisine akan berbagi tutorial seputar bloogspot, nah saya akan membahas cara tulisan atau link tampil disamping judul sidebar, sebagai contoh - kalian bisa lihat pafa Widget Followers pada blog ini, atau seperti gambar di bawah ini,


    Bagaimana caranya ?

    Backup dahulu template sobat untuk mengurangi kesalah.
    • Sekarang, masuk ke "Layout",
    • Tambahkan gadget dengan memilih "Add Gadget",
    • Silahkan cari dan klik "Javascript/HTML",
    • Usahakan pada judul sidebar dikosongkan dan sisipkan beberapa kode di bawah ini kedalam "Javascript/HTML", atau untuk lebih jelas lihat gambar di bawah ini,

    • Kode pertama, Link dengan Icon atau Background,

    <style type="text/css"> .pasang-link{ font-size:11px; float:right; font-weight:bold; background:url(alamat gambar) right 0px no-repeat; padding-right:20px; } </style> <h2><span class="pasang-link"><a href="URL">Link Title</a></span>Title Sidebar</h2>
      • Kode kedua, hanya Link saja yang ditampilkan,

      <style type="text/css"> .pasang-link{ font-size:11px; float:right; font-weight:bold; } </style> <h2><span class="pasang-link"><a href="URL">Link Title</a></span>Title Sidebar</h2>
        • Kode ketiga, hanya tulisan saja,

        <style type="text/css"> .pasang-link{ font-size:11px; float:right; font-weight:bold; } </style> <h2><span class="pasang-link">Text Here</span>Title Sidebar</h2>
          Silahkan sesuaikan dari ketiga kode di atas sesuai dengan sobat.

          Selamat Mencoba..