Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Home » Posts filed under post
Showing posts with label post. Show all posts

Sunday, October 13, 2013

blockquote blogger

Blockquote pada halaman blogspot sangatlah penting, blockquote blogger ini sangat sering kita jumpai pada halaman blog sebab pemakaian sistem Blockquote pada halaman blog termasuk sering digunakan para bloger untuk postingan artikel pada sebuah halaman blog. Apa bila dalam sebuah artikel postingan kita menyematkan suatu pesan ataupun hal penting, ada baiknya kita memakai sistem [ " atau tanda kutip dua atau yang paling sering disebutkan dengan Blockquote ] Sistem titik dua atau Blockquote berpungsi untuk memisahkan satu pesan ataupun suatu tulisan yang diperhitungkan memiliki makna yang paling penting dari artikel yang telah dituliskan, maka tentunya sang author pasti memakai sistem Blockquote ini. Pada tutorial kali ini saya hanya merubah atau mengedit kode CSS nya untuk mempercantik tampilan Blockquote pada halaman blog. Silahkan lihat demo tutorial ini jangan lupa disimak tutorial cara pemasangannya agar lebih abdol... Langsung saja menuju TKP. Ee..ii...ttt tunggu dulu saya hampir lupa bila anda menginginkan tampilan dari Blockquote Blogspot ini silahkan kunjungi halaman Cara mempercantik Blockquote pada halaman blog mana tau anda tertarik.


Demo


Cara mempergunakan Blockquote


  1. Dalam membuat suatu postingan artikel tentunya dalam setiap baris artikel tersebut anda menyematkan berupa suatu pesan atau kode yang merupakan hal penting yang perlu disimak atau diketahui pengunjung blog anda, jadi ada suatu batas pemisah agar para pengunjung blog anda lebih cepat melihat suatu pesan atau kode yang telah diberi tanda kutib dua atau Blockquote.
  2. Pada saat anda menulisa suatu artikel tentu pada halaman menu atas anda dapat melihat suatu tanda ( " ) atau ( Quote ) atau yang biasa dengan Blockquote.
  3. Silahkan select suatu tulisan atau kode pada artikel yang anda tulis.
  4. Setelah anda select silahkan klik tanda ( " ) atau ( Quote ) agar memunculkan tampilan Blockquote pada saat artikel itu dibuka. lihat contoh penulisan dibawah ini.

    <blockquote>
    Ini adalah tulisan yang telah di blockquote atau silahkan isi kode ataupun suatu pesan yang penting didalam blockquote.
    </blockquote>

  5. Tulisan warna merah pada kode penulisan diatas adalah penulisan blockquote yang benar pada HTML.

Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : Blockquote Background
By : Rivai Silaban | Blog Design
Update : Minggu, 13 Oktober 2013
******************************************/
blockquote {
line-height: 20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUeoEhNS_QeS1i9I_kWS6MVsEAp0PCg_lQQKbahlUD6vajY009OUf7MLQVGQH34K7cOQPJbwAhvLNsHyCPDb9mivxYbXDkFwGNLmLZIUHoUXpcr7gB1DoI7N-scWrRBKlLVji90eaQcMw/s1600/black.png);
font-family: "Courier New", Courier, monospace;
font-size: 12px;
color: #000000;
border:solid #999999 1px;
border-left:solid #990000 15px;
padding: 0 5px 0 10px;
margin-left:30px;
}
blockquote:hover{
background: #FFFFFF;
box-shadow:0 0 7px #999;
}
}/*** Blog Design CSS and ***/



Kesimpulan

Silahkan edit CSSnya sesuai dengan tampilan thems halaman blog anda, agar lebih sesuai pada penulisan artikel postingan.

Blockquote dapat anda manfaatkan untuk berbagai kebutuhan dalam menuliskan suatu hal penting agar lebih berbeda dengan baris artikel lainnya. CSS diatas valid CSS 3 jadi untuk template yang menganut CSS 3 kode diatas tidak akan mempengaruhi template anda, dan CSS tergolong ringan. Buat para teman teman yang mengalami masalah dalam pemasangan silahkan share bersama saya pada form komentar dibawah atau silahkan kontak saya melalui fasilitas di blog ini.

Blockquote Bloger
Minggu, 13 Oktober 2013
Rivai Silaban | Blog Design

Di poskan oleh : Unknown | Dipublish pada : 10:47 AM | 10 komentar
Read More

Sunday, August 11, 2013

cara membuat read more otomatis dengan snippet

Memodifikasi post halaman blog agar lebih ringan dengan sistem snipet pada home page halaman blog menjadi keuntungan buat para bloger mania. Sistem memodifikasi post pada halaman blogspot ini dapat mengurangi pemakaian script read more sebab sudah memakai fitur snipet secara otomatis akan mengambil atau menampilkan beberapa baris suku kata dari artikel postingan. Banyak para bloger mania selalu bertanya kepada saya, bagaimana cara membuat loading blog agar tidak lambat ? salah satu cara jitu yang saya pakai adalah sistem memodifikasi post pada halaman blog. itu adalah tehnik saya agar loading blog saya lebih ringan.

Pada postingan kali ini , post yang telah saya modifikasi akan lebih gampang untuk pemakaian berbagai widget pada halaman post anda. saya sudah membuat tanda untuk keperluan widget seperti " Related Post ", " Share media sosial " ditambah dengan pesan anda buat para pengunjung blog seperti halaman blog saya ini. Dalam modifikasi saya saya sudah menyertakan " Author post " pada halaman tersebut jadi anda tidak perlu lagi untuk memasangnya. Untuk demonya anda boleh lihat seperti tampilan halaman blog saya ini, baik itu pada home page saya ( Halaman awal blog ini ) atau tampilan saat anda membaca ini.

Untuk DEMO home page silahkan " KLIK DISINI " Lihat tampilannya tanpa menggunakan read more.

Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

/*****************************************
START CSS modifikasi post BLOG DESIGN
******************************************/
h2.post-titles {
display : block;
font-family : Arial, sans-serif;
font-weight : bold;
font-size : 14px;
color : #950202;
padding : 5px;
background : #D0D5FD;
}
h2.post-title {
display : none;
}
.posthead {
font-size : 12px;
padding-top : 5px;
padding-left : 15px;
color : #999;margin:-10px 0 10px 0;
}
.post-body {
color : #000;
font-family: Georgia, "Times New Roman", Times, serif;
font-size : 13px;
padding : 0 5px;width: auto;height:auto;
text-align : left; line-height: 1.5em;
}
.thuum {
height : 90px;
width : 150px;
border : #999999 solid 1px;
}
.thumbmage {
float : left;
width : auto;
height : auto;
margin : -20px 0 -10px 0;
padding : 5px;
width : 150px;
height : 100px;
transform : rotate(9deg);
} /*****************************************
END CSS modifikasi post BLOG DESIGN
******************************************/


Install Program Tag HTML


  • Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
  • Karena kita mau memodifikasi post pada halaman blog, sekarang anda lebih fokus terhadap tulisan post.
  • cari kode seperti kode dibawah ini

    <b:includable id='post' var='post'>...</b:includable>

  • Setelah ketemu silahkan perhatikan kodenya agar lebih tepat. lihat code
    <b:includable id='post' var='post'> ini adalah kode awal dari post blog anda, jadi anda harus menghapusnya mulai dari kode tersebut. dan kode yang terakhir sebagai kode penutupnya adalah </b:includable> berarti anda harus menghapus semua kode tersebut sampai batas kode </b:includable>.
  • Setelah anda hapus gantikan dengan kode yang ada dibawah ini, silahkan copy kode yang ada didalam spoiler dibawah ini.

<b:includable id='post' var='post'>
<!-- Modifikasi post BLOG DESiGN START-->
<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.title'>
<h2 class='post-titles' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title' rel='nofollow'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title' rel='nofollow'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.firstImageUrl'>
<div style='clear:both;'/>
<span class='thumbmage'>
<img class='thuum' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/>
</span>
<b:else/>
</b:if>
</b:if>
</b:if>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title' rel='nofollow'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title' rel='nofollow'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='posthead'>
Di poskan oleh :
<span class='vcard author'>
<span class='fn'>
<data:post.author/>
</span>
</span>
| Dipublish pada :
<span class='updated'>
<data:post.timestamp/>
</span>
|
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments == 1'>
1
<data:top.commentLabel/>
<b:else/>
<data:post.numComments/>
<data:top.commentLabelPlural/>
</b:if>
</b:if>
</div>
</b:if>
</b:if>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<div>
<!-- Blog Design start pesan halaman -->
<div style='margin-top:1px; margin-right: 2px; text-align:center;font-family : Arial, Helvetica, sans-serif; font-size : 12px;'>
<div>


[[ isi dengan pesan anda kepada pengunjung halaman berupa terimakasih atas kunjungannya]]


</div>
</div>
</div>
<div style='clear: both;'/>
<!-- Blog Design end pesan halaman -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin-top: 10px;'>
<!-- Blog Design start related post halaman -->
<div>



[[ isi dengan related post, silahkan kunjungi <a href="http://rivai-silaban.blogspot.com/2013/07/cara-membuat-widget-related-post-valid.html" target="_blank" title="cara membuat related post">++ cara membuat related post ++ </a> untuk membuat related post halaman anda]]



</div>
</div>
</b:if>
<div style='clear: both;'/>
<!-- Blog Design and related post halaman -->
<!-- Blog Design start share sosial media halaman -->
<div>


[[ isi dengan share sosial media anda, silahkan kunjungi <a href="http://rivai-silaban.blogspot.com/2013/07/cara-membuat-widget-share-diblog.html" target="_blank" title="cara membuat widget share sosial media">++ cara membuat widget share sosial media ++ </a> untuk membuat memasang sosial media share halaman anda]]


</div>
<!-- Blog Design and share sosial media halaman -->

<div style='font-size: 11px; color: #999; padding-top: 5px;'>
Di posting oleh :
<span class='vcard author'>
<span class='fn'>
<data:post.author/>
</span>
</span>
, Update pada :
<span class='updated'>
<data:post.timestamp/>
</span>
| &#9658;
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments == 1'>
1
<data:top.commentLabel/>
<b:else/>
<data:post.numComments/>
<data:top.commentLabelPlural/>
</b:if>
</b:if>

</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div>
<data:post.snippet/>
</div>
<div style='clear:both;'/>
</b:if>
</b:if>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.jumpText' rel='nofollow'>
<data:post.jumpText/>
</a>
</div>
</b:if>
</div><!-- Modifikasi post BLOG DESiGN AND-->
</b:includable>

Keterangan Code
  • Untuk kode CSSnya sesuaikan tampilan dengan kreative anda sendiri,bila ada kode yang sama dengan kode CSS yang anda miliki sebelumnya silahkan hapus satu kode CSS yang sama.
  • Untuk mengisi berbagai widget pada halaman anda silahkan lihat kode warna blog hitam, sya sudah membuat tnda untuk keperluan RELATED POST, SHARE SOSIAL MEDIA, DAN PESAN ADMIN.

Kesimpulan

Modifikasi halaman post yang telah saya posting ini akan mengurangi beratnya loading halaman blog anda. modifikasi post halaman blog ini valid terhadap HTML 5 dan CSS 3 serta lebih SEO Friendly.

Untuk melakukan tutorial ini anda harus lebih dahulu untuk menyimpan tampila template anda agar lebih aman, bila ada kesalahan atau kekurangan pada tutorial ini silahkan hubungi saya dengan fasilitas yang ada di halaman blog ini atau share bersama saya pada form komentar halaman blog ini.

Di poskan oleh : Unknown | Dipublish pada : 10:13 PM | 6 komentar
Read More

Wednesday, July 31, 2013

solusi kesalahan membuat pesan komentar diblog

Cara membuat pesan komentar pada postingan kali ini adalah solusi dari tidak tampilnya dengan maksimal pesan komentar yang telah saya posting jauh jauh hari sebelumnya. Update dari artikel yang telah saya buat kali ini mengantisipasi pesan komentar yang setiap pengunjung memberikan komentar pesan tersebut selalu melorot kebawah kotak komentar dan ada juga teman teman yang lain yang mengalami ketidak munculan suatu pesan komentar pada halaman blognya walau semua tutorial yang telah saya paparkan sudah dilaksanakan. Adanya sampel dari teman yang telah dikirim lewat email kepada saya membuat saya berpikir suatu kesalahan yang dapat menyebabkan ketidak sempurnaan pesan komentar tersebut pada sebuah halaman. Keluhan keluhan yang masuk ke email saya yang telah saya baca. Ada baiknya anda lihat dulu halaman cara membuat pesan komentar diblog agar lebih memahami tentang artikel yang telah saya posting ini, kunjungi http://rivai-silaban.blogspot.com/2013/07/cara-membuat-pesan-komentar-di-blogspot.html


Tidak munculnya pesan komentar pada halaman blog


Akibat dari tidak munculnya pesan komentar pada halaman blog setelah saya selidiki dan ternyata keselahan tersebut bukanlah pada pesawat komputer anda melainkan hanya kesalahan kode html he he he....Ada 2 faktor yang sangat berpengaruh, pada kasus ini, saya berharap anda dapat memahaminya dengan baik.

  1. Faktor akibat kode html komentar yang telah dimodifikasi secara keseluruhan. Bagi para pembuat template hal ini tidak merupakan sebuah kesalahan sebab bila kita membuat suatu template pasti kia akan membuat suatu template yang berbeda dengan yang lain, agar terkesan lain dan unik. Biasanya komentar pada halaman blog sering dirubah agar terlihat lain dari yang lain. jadi solusi yang terbaik adalah membuat suatu pesan komentar secara manual dengan membuat tag tag html secara langsung ketubuh blog. kunjungi halaman berikut : http://rivai-silaban.blogspot.com/2013/06/cara-membuat-pesan-komentar-di-blog.html
  2. Faktor menempatkan kode yang salah dan kurang sempurna pada tubuh halaman blog membuat tidak munculnya pesan komentar. coba perhatikan dengan teliti code yang di copas, harus semua code di copas dengan baik. Dari kasus yang telah saya lihat terkadang kesalahan tidak munculnya pesan komentar pada halaman blog akibat salahnya penempatan kode CSS pada tubuh ]]></b:skin> pada template responsive atau semi responsive. Template ini memang memakai sistem screen yang telah disesuaikan alias tidak bebas, oleh karena itu bila anda salah meletakkan semua code CSS ketubuh ]]></b:skin>  template banyak kemungkinan error dan tidak munculnya pesan komentar tersebut.

Solusi Bila anda belum paham benar tentang mengotak atik tag html halaman blog anda, ada baiknya anda memasang pesan komentar secara manual saja bukan secara otomatis agar lebih sempurnah dan maksimal pada halaman blog anda. Kunjungi link warna biru diatas untuk tehnik memasang pesan komentar secara manual ditubuh halaman blog.

Pesan komentar yang selalu melorot kebawah kotak form komentar
Masalah ini diakibatkan oleh kurangnya beberapa code pada script dan html comment halaman blog, untuk mengatasi hal ini anda perlu manambahkan kode ke tubuh blog anda, silahkan simak penjelasan dibawah ini.

Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari kode dibawah ini.

    4. <b:includable id='threaded-comment-form' var='post'>
    <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
    <p><data:blogCommentMessage/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
    <p><data:blogCommentMessage/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </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>


  4. Setelah ketemu, coba perhatikan kode tersebut , silahkan hapus kodenya dari kode tulisan warna MERAH atas sampai kode tulisan warna MERAH yang dibawah.
  5. Kemudian ganti dengan kode html yang ada dibawah ini.

    6. <b:includable id='threaded-comment-form' var='post'>
    <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
    <div id='bdform-wrapper'>
    <p><data:blogCommentMessage/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    </div>
    <b:else/>
    <div id='bdform-wrapper'>
    <p><data:blogCommentMessage/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </div>
    </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>


  6. Setelah anda ganti kodenya saatnya kita poles sedikit lagi scriptnya untuk lebih maximal.
  7. Cari kode tag dibawah ini pada template anda
     document.getElementById(domId).insertBefore(replybox, null);
    Biasanya kode tersebut ada pada script komentar ,
  8. ganti kode script yang diatas menjadi kode script dibawah ini.
     document.getElementById(domId).insertBefore
    (document.getElementById('bdform-wrapper'), null);

  9. Setelah selesai saatnya anda klik SAVE untuik menyimpan perubahan.

Keterangan Code
  • Tulisan kode warna MERAH atas sampai kode warna MERAH dibawah harus secara keseluruhan anda hapus kemudian masukkan kode pengganti lihat didalam spoiler " Kode Yang Diganti ")
  • Cari kode warna HIJAU seperti diatas, setelah ketemu ganti dengan code warna BIRU. Biasanya kode ini berada pada tag html blog

Kesimpulan

Mengantisipasi pesan komentar halaman blog yang tidak muncul dan pesan komentar yang selalu berada dibawah kotak form komentar

Di poskan oleh : Unknown | Dipublish pada : 11:44 PM | 8 komentar
Read More

Tuesday, July 30, 2013

cara membuat spoiler di blog valid html5

Membuat spoiler di halaman blog sangat berguna untuk berbagai artikel postingan, disamping spoiler ini valid html 5 dan CSS 3 tampilannya juga menarik. Fungsi dari pada spoiler itu bervariasi tergantung kebutuhan sipemakai. Buat saya dan blog ini spoler membantu saya untuk memperringkas tampilan berbagai tutorial yang telah saya posting di halaman blog ini. Buat teman teman yang sering berkunjung ke blog yang sederhana ini spoiler bukanlah hal yang lain sebab saya memakainya hampir disemua tutorial yang ada dihalamanblog ini. Spoiler dapat meringkas atau meminimalkan pemakaian halaman blog sehingga lebih rapi kelihatannya disamping itu juga menurut pengalaman saya pribadi, spoler ternyata mampu untuk mengurangi berat loading blog saya ini. Postingan saya kali ini terinspirasi dari beberapa teman dan sahabat saya, setelah berbagai email , chat dan komentar yang disampaikan kepada saya tentang bagaimanan membuat tombol kode pada halaman blog ini, dan saya dengan senang hati saya membuat postingan ini.Oke langsung saja saya harap teman teman bloger sudah paham hal ini untuk DEMOnya saya harap anda juga sudah tau cara pemakaian dan fungsinya. lihat saja tombol tulisan KODE CSS yang ada dibawah itulah yang dinamakan dengan spoiler. tapi yang ini lebih unik dan menarik. Oke langsung saja menuju TKP.


Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

.BD_spoler{
background:#09f;
border: 2px solid rgb(9, 149, 223);
border-radius: 3px 3px 3px 3px;
box-shadow: 2px 4px 4px rgb(113, 112, 112);
color:#FFFF00;
cursor:pointer;
font-family:verdana;
font-weight:700;
padding:20px;
text-shadow:1px 1px 0 rgba(0,0,0,.4);
text-transform:uppercase;
width:100%;
background-color: #0099FF;
border-color: #00FFFF;
}
.BD_spoler:hover,.BD_spoler:focus{
background-color: #0066CC;
color: #FFFFFF;
border-color: #00CCFF;
}


Install dihalaman postingan


  • Untuk pemasangan code tag spoiler valid html 5 ini tergantung dengan kebutuhan halaman blog anda, anda dapat memasangnya dimana saja,
  • Untuk memasang dihalaman postingan artikel , anda hanya memasukkan code tag html dibawah ini pada artikel yang anda posting.
  • Masuk ke " Post "
  • Kemudian buat " Entri baru "
  • Untuk menyematkan code dibawah ini pada postingan anda harus klik " HTML " ( bukan "compose " ) Setelah anda klik " HTML " masukkan code html dibawah ini ditempat yang anda inginkan, kemudian ganti tulisan warna merah pada kode dibawah dengan tulisan anda, kode anda, dll.
  • Setelah selesai lihat dulu " Pratinjau " sebelum anda save untuk melihat kesempurnaan pemasangan spoiler tersebut.
  • Setelah benar benar sudah sempurna silahkan klik " publikasikan "

<br/><div><div style="margin: 2px;text-align:center" >
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"> </span></i><input type="button" class="BD_spoler" style="margin: 0px; padding: 0px; width: 320px; font-size: large; text-align: center;" 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 = 'TUTUP CODE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'CODE CSS'; }" value="CODE CSS"/>
</div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 4px; background-color: #EBEBEB; font-family: Arial, Helvetica, sans-serif; font-size: 12px;">
<div style="display: none">
<p align="left" >

GANTIKAN TULISAN INI DENGAN TEXT, CODE, DLL
( INI ADALAH ISI SPOLER )

</p></div></div></div></div><br/>

Keterangan Code
  • Tulisan kode warna MERAH adalah isi dari spoiler, baik itu text, code html , script , css dll. Hanya tulisan warna merah yang dapat anda gantikan dengan berbagai keperluan anda.
  • Tulisan warna BIRU adalah tulisan yang ada pada tombol spoiler, tulisan awal dan setelah diklik, ganti tulisan tersebut sesuai dengan selera anda.
  • Tulisan code warna HIJAU adalah warna latar belakan didalam spoiler, silahkan anda ganti sesuai dengan selera anda.
  • Untuk Code CSSnya silahkan anda edit ( code yang ada pada spoiler atas dengan tulisan CSS )
  • Untuk kode tag htmlnya, buat yang belum paham kode html jangan pernah merubahnya agar tidak mempengaruhi cara kerjanya.

Kesimpulan

Tag html spoiler ini dapat anda pasang pada template blog HTML 5 dan CSS 3. Penempatan spoiler ini tergantung dari kebutuhan anda, dapat anda pasang pada halaman, header, sidebar dan footer halaman anda bahkan di window pop Up juga dapat anda pasang.

Di poskan oleh : Unknown | Dipublish pada : 8:54 PM | 2 komentar
Read More

Thursday, July 25, 2013

mengantisipasi tag heading h4 h5 h6 not found pada tool seo

Mengontrol tag Heading H4 H5 H6 agar lebih SEO Friendly masih menjadi perbincangan hangat dalam urusan SEO ini. Penaganan tag Heading pada halaman blog memang merupakan suatu kewajiban para bloger untuk menuruti standarisasi kode html/xml pada halaman blog khususnya. Mungkin tidak sedikit jga para bloger yang masih tidak memperdulikan hal ini, tapi menurut saya hal ini sungguh menjadi patokan standart dari penulisan tag html title pada suatu halaman blog. Saya mendapat inspirasi dari beberapa teman saya baik itu melalui email, chat dan komentar mengatakan tentang penggunaan tag header title jenis H4 H5 H6 pada halaman blog karena suatu alasan , setelah SEO dari blognya di tes keberbagai tools hasilnya tidak memuaskan adanya error atau tidak terdeteksinya tag title H4 H5 dan H6 pada halaman blog mereka. Memang sebagai Design Blog saya juga kadang kadang tidak memperdulikan hal ini bila saya membuat suatu template namanya manusia kadang lupa kan xixixixixi.

Pada dasarnya tag title ini sangat berfungsi pada halaman blog sebab sudah menjadi suatu standart internasional, dimana dalam suatu sistem perayapan pendeteksian suatu artikel postingan diawali dengan suatu judul artikel lalu merayapi semua bagian tag tag html lainnya, saya merasa hal ini sungguh masuk akal, sebab kepala adalah merupakan suatu kunci dari semua element yang terkandung didalamnya. Pada postingan saya kali ini, saya akan memberikan suatu tips solusi untuk mengatasi tidak terdeteksinya tag title H4 H5 dan H6 pada suatu halaman oleh berbagai tools analisis SEO situs. Untuk melihat artikel yang berkaitan dengan poatingan kali ini tentang bagaimana membuat format tag title halaman blog menjadi SEO kunjungi halaman ini :
http://rivai-silaban.blogspot.com/2013/07/cara-membuat-judul-artikel-seo-friendly.html

Pada setiap halaman blog penggunaan tag title H4 H5 dan H6 ini harus dipasang dibawah naungan tag title H1. Bila suatu halaman blog memerlukan tag title tersebut hal itu dapat anda atasi dengan mengganti tag title pada sidebar atau footer halaman blog anda yang dulunya mungkin memiliki tag title H2 atau H3, Jadi anda hanya mengganti beberapa tag title dari widget anda yang mempunyai tag title H2 atau H3 menjadi tag title H5. Ganti beberapa tag title dari widget tersebut. Tapi perlu anda ingat bila anda sudah menganti tag title dari widget tersebut anda harus memasang judul widgetnya sebab bila anda tidak memasang judul dari widgetnya sama juga dengan nihil sebab yang terdeteksi hanya tag title widget yang menjadi tag title format H5. Solusi yang lain untuk menangani hal ini adalah membuat suatu tulisan pada widget dan diberi judul dengan format tag title H5. contohnya adalah :

<h5>ini adalah jenis format tag title h5</h5>

Saya berharap anda dapat mengerti tentang semua penjelasan diatas, sehingga anda dapat mengontrol format tag title jenis H4 H5 dan H6 pada halaman blog kesayangan anda agar terdeteksi dengan baik pada sistem SEO Friendly situs halaman blog.



Kesimpulan

Penggunaan semua jenis format tag title dari mulai jenis tag H1, H2, H3, H4, H5 dan H6 sangat mempengaruhi nilai score SEO halaman blog anda. Pasanglah semua elemen elemen format tag title pada halaman blog anda agar lebih sesuai standart ataupun SEO Friendly.

Di poskan oleh : Unknown | Dipublish pada : 1:42 PM | 10 komentar
Read More

Wednesday, July 24, 2013

membuat link internal dan external seo friendly

Menangani link agar lebih SEO Friendly pada halaman blog harus mengetahui nilai link internal dan link external pada halaman blog. Orang banyak berpikir untuk membuat halaman blog itu agar SEO friendly hanya memikirkan artikel dan backlink serta berbagai artikel yang bermutu dan lain sebagainya tanpa pernah memikirkan atau mengetahui jenis link yang ada pada halaman blognya. Dalam postingan kali ini saya akan membuka suatu rahasia yang dapat mempengaruhi sistem SEO pada halaman blog, yaitu mengontrol nilai link external ataupun link internal. Saya melihat banyak teman teman bloger yang tidak memikirkan hal tersebut tapi pada dasarnya tetap membahas hal mengenai SEO Friendly. Sebenarnya membangun halaman blog agar lebih SEO Friendly ada beberapa kriteria ( Saya akan menjelaskannya pada postingan saya satu persatu ) yang harus kita pahami dan sudah merupakan suatu kunci dasar atau pondasi dasar pada pengoptimalan mesin pencari atau Search Engine Optimation. Salah satu kunci dasar yang akan saya bahas dalam postingan ini adalah link Internal dan link External. Saya membahas atau membuka rahasia ini buat anda terinspirasi salah seorang sahabat saya yang memang dia lebih suka bertanya langsung daripada meraba raba, saya suka dengan hal itu. ( Kejujuran adalah suatu keuntungan tersendiri buat kita ). Saya sendiri akan membahasnya satu persatu agar anda lebih memahami tentang apa itu link external dan link internal.


Link Internal

Link internal adalah suatu tautan atau link yang mengarah ketubuh halaman itu sendiri. Link internal ini biasa ditemui pada postingan halaman dimana artikel yang telah kita posting tertaut dengan artikel lainnya yang saling berhubungan. Link internal ini juga sering didapati pada halaman awal postingan dimana tampilan dari jumlah artikel yang telah dimunculkan pada halaman depan atau homepage akan terhitung pada link internal blog tersebut. Pada tampilan widget post populer dan widget entri populer hal ini juga dihitung sebagai link internal dalam halaman blog. Ada juga script yang pada kenyataannya link yang terkandung didalamnya akan terhitung sebagai link internal tapi tidak semua script yang memiliki link yang terhitung. Link pada tag html menu navigasi halaman blog juga akan terhitung sebagai link internal blog. Sturktur penulisan code jenis link internal itu adalah :

http://rivai-silaban.blogspot.com/ bla.. bla... bla..

Mengendalikan jumlah link Internal blog

  1. Kurangi artikel tertaut pada tubuh halaman itu sendiri.
  2. Kontrol jumlah widget yang menampilkan jumlah postingan halaman blog
  3. Kontrol link dengan REL " Nofollow "


Kesimpulan Link Internal

Jumlah link internal yang telah disepakati agar lebih SEO Friendly pada halaman blog hanya berkisar maximal 100 link internal. Manfaatkan sebaik baiknya link yang ada pada tubuh halaman blog agar lebih mudah dikendalikan untuk meningkatkan kualitas halaman blog tersebut lebih SEO Friendly.



Link External

Link External adalah suatu link atau tautan yang menuju situs web ataupun blog lain ( bukan diri sendiri ). Link external ini sering kita lihat pada widget sosial media baik itu berupa Share ataupun follow & like sosial widget, semua link yang terkandung pada widget ini akan terhitung sebagai link external. Pada umunya blog dengan sistem REL " Dofollow " akan terhitung sebagai link external dimana semua link yang ada pada halaman tersebut akan menjadi link Juise pada halaman yang dituju. Tautan artikel yang tertuju ke halaman blog lain akan terhitung juga sebagai link external. Credit link pada template akan terhitung sebagai link External ( Tapi saran saya credit link atau link template pembuatnya jangan sekali kali anda hapus sebab anda hanya dianggap sebagai pecundang menurut saya dan saya dengan tegas menyatakan tidak menyukai orang yang semacam ini !! )Sturktur penulisan code jenis link external itu adalah :

http://domain-blog-lain.blogspot.com/ bla.. bla... bla..

Mengendalikan jumlah link External blog

  1. Kontrol link tertaut pada halaman lain
  2. Kontrol jumlah widget sosial media dll
  3. Kontrol link dengan REL " Nofollow "
  4. Blog " Nofollow " adalah alternatif menangani link external ini.


Kesimpulan Link External

Jumlah link internal yang telah disepakati agar lebih SEO Friendly pada halaman blog hanya berkisar maximal 20 link external saja, jadi anda sebaiknya pintar pintar dalam hal menangani masalah link external ini agar halaman blog anda lebih ramah terhadap mesin pencari. Blog sistem NOFOLLOW adalah solusi terbaik untuk menangani hal ini.

Di poskan oleh : Unknown | Dipublish pada : 2:26 PM | 14 komentar
Read More

Tuesday, July 23, 2013

cara membuat tool parse kode html diblog

Tool parse kode html atau aplikasi konversi kode html adalah suatu sistem konversi atau penggantian kode html tertentu yang tidak dapat dipublish oleh aplikasi tag tag html pada halaman blog atau situs web. Kegunaan konveksi kode html ini sering dipergunakan kebanyakan untuk berkomentar dengan memuat tag tag html yang dalam devaultnya tag html tersebut tidak dapat dipublish pada kotak komentar halaman blog. Pada halaman blog yang membidangi tutorial hal ini sangat perlu dimiliki, dengan alasan apabila seorang komentator mau memuat suatu code tag html pada komentar untuk mengkomentari tutorial yang diposting maka sang komentator akan memerlukan suatu aplikasi untuk mengkonversi code tag html tersebut untuk dapat dipublish pada form komentar. Ada juga yang mempergunakan aplikasi konversi tag html ini untuk berbagai keperluan untuk mengganti semua kode tag yang memang pada dasarnya kode tag html tersebut tidak diterima oleh beberapa aplikasi halaman blog.

Pada tutorial kali ini saya akan membantu anda untuk mengantisipasi hal tersebut. Aplikasi ini saya buat menggunakan software Macromadia Dreamweaver 8 dan memiliki script yang ringan serta Valid HTML 5 dan CSS 3 jadi sangat cocok untuk template yang berbasih HTML 5, Script ini juga SEO Friendly dengan menganut pengcodean script yang mempunyai standart SEO. Aplikasi Konveksi HTML ini saya berinama " Black Parse HTML ". Buat para teman teman bloger menginstalasi script ini tergolong mudah pada halaman blog kesayangan anda.


Kode standart yang dapat dikonversi

  1. Code [ & ] menjadi [ &amp; ]
  2. Code [ < ] menjadi [ &lt; ]
  3. Code [ > ] menjadi [ &gt; ]
  4. Code [ " ] menjadi [ &quot; ]
  5. Code [ ± ] menjadi [ &plusmn; ]
  6. Code [ © ] menjadi [ &copy; ]
  7. Code [ ® ] menjadi [ &reg; ]

Untuk melihat DEMO silahkan kunjungi link halaman dibawah ini :
http://rivai-silaban.blogspot.com/p/k-onversi-kode-html-adalah-suatu-sistem.html


Install Program CSS


  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Cari code ]]></b:skin> 
  • Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

.boxarea_BD { background-color:#F2F2F2; border: solid #ccc 1px; border-radius:10px; padding:10px;box-shadow: 1px 1px 2px #ccc;}
.boxarea_BD:hover { background-color:#FFFFFF; border: solid #ccc 1px; border-radius:10px; padding:10px;box-shadow: 1px 1px 2px #ccc;}
.BD_tombol {color:#FFFFFF;font-weight:bold;text-decoration:none;padding:6px 15px;border:1px solid #c4c4c4;cursor: pointer;border-radius: 4px;
background: #fbfbfb;background-color: #000000;}
.BD_tombol:hover{color:#FFFFFF;font-weight:bold;text-decoration:none;background-color: #313333;}


Install Program Tag HTML


Untuk menempatkan script dan kode tag ini ada baiknya anda tempatkan pada satu halaman blog anda, atau bisa saja pada widget, tergantung selera anda.


Tutorial pemasangan pada halaman blog


  1. Setelah anda login ke dasbor blog anda silahkan pilih " LAMAN "
  2. Kemudian klik " LAMAN BARU "
  3. Pilih " LAMAN KOSONG "
  4. Setelah berada pada halaman kosong pilih " HTML " bukan " COMPOSE "
  5. Copy script dibawah lalu pastekan pada halaman kosong " HTML "
  6. Kemudian buat judul halaman dan simpan halaman anda.

Tutorial pemasangan pada widget blog


  • Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
  • Silahkan klik "Add Gadget "( Tambahkan gadget )
  • Pilih " HTML / JavaScript "
  • Copy Code script/html dibawah ini, paste pada gadget anda.
  • Untuk memaksimalkan ukuran sesuai dengan halaman anda silahkan edit code [ cols="50" rows="15" ] sesuai dengan ukuran widget pada halaman anda.

<textarea cols="50" rows="15" wrap="virtual" class="boxarea_BD" id="bdkode" placeholder="1. Ketikkan kode html anda disini, 2. Kemudian klik Konversi , 3. Untuk membersihkan klik &quot;Bersihkan&quot; 4. Jenis Kode : &lt; &quot; &amp; &quot; &gt; &amp; &plusmn; &reg; &#169; " spellcheck="false"></textarea>
<br /><span>
<button class="BD_tombol" id="bdclear" onClick="convert();this.disabled = true;" title='Konversi'>KONVERSIKAN</button>
<button class="BD_tombol" onClick="cdClear();" title='Bersihkan'>BERSIHKAN</button>
</span><script type="text/javascript">
function cdClear() {
var wtarea = document.getElementById('bdkode');
wtarea.value = '';
wtarea.focus();
document.getElementById('bdclear').disabled = false;
}function convert(){var ele1 = document.getElementById("bdkode");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&amp;");replaced = replaced.replace(/</ig, "&lt;");replaced = replaced.replace(/>/ig, "&gt;");replaced = replaced.replace(/"/ig, "&quot;");replaced = replaced.replace(/&#177;/ig, "&plusmn;");replaced = replaced.replace(/&#169;/ig, "&copy;");replaced = replaced.replace(/&#174;/ig, "&reg;");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;}
</script>
<div style="clear: both;">

Pengoperasian Aplikasi
  • Ketikkan atau pastekan kode html anda pada form textarea
  • Kemudian Klik " KONVERSIKAN "
  • Copy code anda yang sudah Di Konversi.
  • Bila anda merasa belum sempurna silahkan ulagi dan klik " BERSIHKAN " untuk membersihkan textarea bekas kode yang telah dibuat.


Kesimpulan

Aplikasi konversi kode html ini dapat anda pergunakan untuk berbagai keperluan dalam hal menangani konversi kode html. Script yang dimiliki aplikasi ini ringan dan SEO friendly serta Valid HTML 5 dan CSS 3.

Di poskan oleh : Unknown | Dipublish pada : 12:28 PM | 6 komentar
Read More

Monday, July 22, 2013

meningkatkan trafik pengunjung dengan feedburner

Mengalihkan pengubahan arah feed dapat meningkatkan trafik pembaca ataupun pengunjung halaman blog yang kita sayangi. Dalam sistem devault post feed halaman blog baik itu Atom & RSS sangat mempengaruhi trafik jumlah pengunjung halaman blog, hal ini dapat kita ketahui dengan adanya suatu link post yang disediakan secara devault oleh bloger dengan memanfaatkan sistem RSS pada halaman tersebut. Sistem lalulintas pengunjung pada halaman blog dapat dipengaruhi oleh sistem RSS halaman blog tersebut. Dengan memanfaatkan berbagai fasilitas geratis yang ada di dunia maya anda dapat mengganti sistem Devault RSS halaman blog anda agar lebih maksimal. Dalam postingan kali ini saya mempercayakan pengubah arah feed BLOG sederhana saya ini dengan RSS FEEDBURNER yang sudah terbukti kehandalannya dibidang RSS.

Fungsi mengalihkan arah feed blog

Dengan mengalihkan semua arah feed devault RSS blog akan mempengaruhi peningkatan trafik pengunjung halaman blog. Pada kinerja pengalihan halaman feed ini saya akan memberika suatu ilustrasi tentang sistem kinerja pengubah arah feed devault halaman blog ini. Misalkan anda membuat suatu postingan pada halaman blog anda, dan secara otomatis url link artikel postingan tersebut akan menjadi link RSS devault blog tersebut. Untuk menampilkan link RSS artikel itu anda harus secara manual melakukannya agar tampil pada halaman blog anda, atau paling tidak anda akan membutuhkan widget untuk hal tersebut. Memang widget tersebut sudah disediakan pihak blogspot dengan geratisan tapi hal itu hanyalah sebatas RSS standart dan untuk mengontrol lalulintas RSS pada halaman blog yang kita milikipun masih terbatas dan kita belum memiliki hak akses serta fasilitas penuh dan berbagai tools dalam menanganinya, Oleh karena itu om google memberi semua fasilitas yang terbaik uttuk membernya dengan menciptakan situs yang mampu menangani masalah jalur Atom & RSS yaitu FEEDBURNER.com. Anda dapat menggunakan jasa dari feedburner ini untuk menangani Feed anda, karena fasilitas yang telah disediakan oleh feedburner memang sudah benar benar komplit, selain itu anda juga akan memiliki suatu halaman khusus RSS anda yang dapat anda kontrol sesuka hati anda, Sehingga anda dapat memaksimalkan promosi artikel postingan anda agar lebih luas yang tentunya hal ini akan meningkatkan trafik pengunjung blog anda.

Bagi anda yang sudah memiliki link URL feed dari feedburner silahkan simak penjelasan dibawah ini tentang bagaimana mengubah arah feed dengan memanfaatkan link RSS dari feedburner, agar lebih maksimal dalam meningkatkan trafik pengunjung blog anda bahkan para pembaca atau reader halaman blog anda, Hal ini juga akan mempengaruhi peningkatan jumlah pembaca atau reader pada feedcount reader halaman blog anda yang juga telah disediakan oleh feedburner secara geratisan. Bila anda belum mengetahui apa itu feedcount dari feedburner silahkan kunjungi link ini : http://rivai-silaban.blogspot.com/2013/06/cara-membuat-feedcount-feedburner-di.html

Untuk mewujudkan misi kita pada pembahasan kali ini silahkan simak penjelasan dibawah ini :

  1. Seperti biasa login ke dasbor blog anda
  2. Setelah anda masuk silahkan pilih " SETELAN " lalu " LAINNYA "
  3. Silahkan lihat tulisan " Posting URL Pengubahan Arah Feed " setelah ketemu isikan form tersebut dengan link RSS Feedburner anda. Lihat contoh link RSS feedburner blog ini.
    http://feeds.feedburner.com/RivaiSilaban
  4. Setelah anda muat linknya pada form tersebut saatnya anda untuk menyimpan perubahan yang ada, silahkan klik icon " SIMPAN SETELAN " yang ada pada pojok atas sebelah kanan anda ( icon background Merah )

Kesimpulan

Dengan mengalihkan semua arah feed devault halaman blog anda akan memberikan suatu perubahan pada sistem lalulintas pengunjung halaman blog anda serta meningkatkan jumlah pembaca artikel postingan halaman blog anda. hal ini akan secara otomatis akan meningkatkan trafik pengunjung halaman blog anda.

Di poskan oleh : Unknown | Dipublish pada : 12:24 PM | 14 komentar
Read More

Saturday, July 20, 2013

Random post dengan gambar valid html5

Widget random post dengan gambar ini mempunyai script yang memang ringan walaupun script widget random post ini mampun untuk menampilkan Judul postingan, dan gambar bahkan menampilkan beberapa kata dari artikel yang telah diposting. Pada postingan saya dihari hari yang lewat, saya telah membuat suatu artikel yang berisi Script widget random post yang tidak menampilkan gambar. Tulisan saya kali ini terinspirasi dari dorongan beberapa teman yang mengatakan untuk sekalian gambar untuk widget ini ditampilkan. Widget ini SEO Friendly dan Valid HTML 5 dan CSS 3 kenapa saya katakan demikian, sebab script widget ini menganut penulisan tag tag yang dianjurkan oleh prinsip SEO dan Valid HTML 5. Disamping hal tersebut widget ini mempunyai script yang memang benar benar mempunyai loading yang ringan dan tidak akan mempengaruhi loading blog anda. Tampilan yang benar benar mempunyai design yang menarik akan menambahkan kesan menarik juga pada halaman blog kesayangan anda. Widget random post dengan gambar ini saya namakan dengan " Widget Beautiful Avatar Random Post ". Oke tanpa penjelasan yang lebihpanjang lagi dan saya harap anda sudah memahami temtang kegunaan dari script random post dengan gambar ini kini saatnya kita menuju TKP dan silahkan anda simak penjelasan tutorial berikut. Untuk melihat tehnik pembuatan random post tanpa gambar yang SEO Friendly dan Valid HTML 5 silahkan kunjungi halaman ini : http://rivai-silaban.blogspot.com/2013/07/widget-random-post-seo-friendly-html5.html

random post dengan gambar valid html5

Install Program CSS


  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Cari code ]]></b:skin> 
  • Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

#BD_random-post img{
float:left;
margin-right:10px;
border:1px solid #999;
background:#FFF;
width:42px;
height:36px;
padding:3px;
border-radius:0 10px 10px 0;
list-style-type: none;
}
#BD_random_avatar td {
list-style-type: none;
width: 100%;
padding: 3px;
}

#BD_random_avatar a {
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #0000CC;
line-height:12px;
letter-spacing:0.1em;
text-decoration: none;
display:block;
padding:2px 6px 5px 10px;margin-left:10px;
background: url() 0px 50% no-repeat;
background-color: #FFFFFF;
}

#BD_random_avatar a:hover {
background: #ffffff url() 0px 50% no-repeat;
color:#990000;
text-transform: none;
background-color: #FFE1E1;
}
.BD_random_list {
color: #000;
text-decoration: none;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;list-style-type: none;
}


Install Program Tag HTML


Untuk memanggil widget Random Post tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini ;
  • Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
  • Silahkan klik "Add Gadget "( Tambahkan gadget )
  • Pilih " HTML / JavaScript "
  • Copy Code HTML dibawah ini, paste pada gadget anda.

<div id="BD_random_avatar">
<div class="BD_random_list">
<div id='BD_random-post'>
<script type='text/javaScript'>
var rdp_numposts=5;// Jumlah post yang ditampilkan
var rdp_snippet_length=100;// Jumlah tulisan yang ditampilkan
var rdp_info='yes';
var rdp_comment='Komentar';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script src=\"/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=totalposts\" type="text/javascript"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else
{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Ary51ivc6IxMYwuTaE6g1VnPa_GQN0EGwvkG0QilghEAnVMKWnceQRlwCZdbrk0_CDqjsTFfVBFJZ3Ez1ELfKzRtwqVt1mAm4eT94OwWuRhILTQHt9jXvzFUFPSnzohOsYZBRJhZn4Y/s1600/no-image.gif"}}};document.write('<li style="border-bottom: dotted #000 1px;background-color: #eee;">');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'" title="'+rdp_posttitle+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<br/><span style="margin-top:8px">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<br/><span style="margin-right:5px;text-align: left;">'+rdp_snippet+'</span></li><br/>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script src=\"/feeds/posts/default?alt=json-in-script&amp;start-index='+rdp_current[i]+'&amp;max-results=1&amp;callback=random_posts\" type="text/javascript"><\/script>')};
</script>
</div></div></div>

Keterangan Gambar
  • Code warna merah adalah jumlah postingan arikel yang akan dimunculkan pada halaman
  • Code warna Biru jumlah kosa kata yang akan ditampilkan
  • Silahkan anda desain code CSS nya untuk menyesuaikan tampilan Thems halaman blog anda.


Kesimpulan

Widget Random Post ini dilengkapi dengan gambar yang secara otomaits ditampilkan bila artikel tersebut memiliki suatu gambar dan akan menampilkan gambar pengganti bila artikel tersebut tidak memiliki gambar. Widget Random Post image ini SEO Friendly dan Valid HTML 5 Serta Fast loading script, Cocok untuk widget random post halaman blog kesayangan anda.

Di poskan oleh : Unknown | Dipublish pada : 12:50 PM | 35 komentar
Read More

Friday, July 19, 2013

Widget random post seo friendly html5

Random post adalah suatu artikel postingan yang dipilih secara acak untuk ditampilkan pada halaman. Pemakaian random post ini pada halaman sangat berguna mengingat sudah banyaknya artikel yang telah lama diposting pada blog agar ditampilkan kembali pada halaman blog apabila pengunjung berkunjung keblog kita. Coba anda pikirkan apabila anda sudah memiliki 300 artikel postingan pasti yang pertama kali diposting reviewnya tentu sudah sedikit itupun hanya mengandalkan suatu keybord pada search engine agar pengunjung mengetahuinya, Tapi pada widget Random Post ini hal itu dapat diatasi. Pada kinerjanya widget Random Post ini akan menampilkan secara acak semua aritek postingan yang telah terpublish pada blog walaupun itu artikel pertama yang pernah kita posting. Keuntungan memakai widget Random Post ini bila seseorang mengunjungi halaman blog anda secara otomatis artikel yang lain akan dimunculkan oleh widget ini dan pengunjung blog andapun tau bahwa masih adalagi artikel lain yang telah diposting dihari hari yang lewat tanpa harus membuka suatu menu. Saya rasa penjelasan diatas sudah bisa anda pahami tentang kegunaan dari widget ini. untuk mewujudkan misi kita, silahkan anda simak penjelasan pemasangan tutorial widget Random Post ini :

cara membuat random post seo friendly valid html5

Install Program CSS


  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Cari code ]]></b:skin> 
  • Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

#BD_random_title td {
list-style-type: none;
width: 100%;
padding: 3px;
}

#BD_random_title a {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #000;
line-height:12px;
letter-spacing:0.1em;
text-decoration: none;
display:block;
padding:2px 6px 5px 8px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio1XAuXFRE59fu8poo3ul6i4VX0aURF9ttre06VdfjCI0u3Qr56ZddOnMYqcVT-e7XINjWNPp_5KI0TkKJLoraX8JcDU5QDPAZg-EyxjzbctPJ9HzwtVRrth2crtFHquDGZ-qqDD9xzhE/s1600/mm_arrow.gif") 0px 50% no-repeat;
background-color: #FFFFFF;
}
#BD_random_title a:hover {
background: #ffffff url() 0px 50% no-repeat;
color:#990000;
text-transform: none;
background-color: #FFE1E1;
}
.BD_random_list {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #000;
line-height:10px;
letter-spacing:0.1em;
text-decoration: none;
}


Install Program Tag HTML


Untuk memanggil widget Random Post tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini ;
  • Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
  • Silahkan klik "Add Gadget "( Tambahkan gadget )
  • Pilih " HTML / JavaScript "
  • Copy Code HTML dibawah ini, paste pada gadget anda.

<div id="BD_random_title">
<div class="BD_random_list">
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;// Jumlah artikel yang akan ditampilkan
function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write();
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item ="<div style='border-bottom: dotted #ccc 1px;'>" + "<a href=" + entry.link[k].href + " title=" + entry.link[k].href +">" + entry.title.$t + "</a></div>";
document.write(item);}}
}document.write();}
</script>
<script src="/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" type="text/javascript"></script> </div></div>

Keterangan Gambar
  • Code warna merah adalah jumlah postingan arikel yang akan dimunculkan pada halaman
  • Code warna Biru batas minimal dan maximal artikel yang dapat dijangkau widget Random Post ini
  • Silahkan anda desain code CSS nya untuk menyesuaikan tampilan Thems halaman blog anda.


Kesimpulan

Widget Random Post ini SEO Friendly dan Valid HTML 5 jadi anda dapat memasang widget ini pada template HTML 5 begitu juga dengan Template Responsive dan yang paling menarik script yang digunakan sangat ringan dan tidak akan memperlambat Loading halaman blog kesayangan anda.

Di poskan oleh : Unknown | Dipublish pada : 11:58 AM | 2 komentar
Read More

Find us on Google+ | Powered Blogspot

7 Maret © 2013 Rivai Silaban | BLOG DESIGN