Buku Tamu: Blogger Template

Tampilkan postingan dengan label Blogger Template. Tampilkan semua postingan

Sporty Magazine 2 Free

$00.00

TUTORIALS HOW TO USE SPORTY MAGAZINE 2

First step, you have to download Sporty Magazine 2 files. After that, follow the instruction below.

Menu Navigation Dropdown

To set this menu, please go to your HTML stukrut page (no need to expand), then scroll down and find the following code : <div id='menuwrapperpic'> (Notes : for quick search, press the F3 key, type the code above and enter). After this code, you will find menu navigation dropdwon below :

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li class='selected'><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuyRt-JFRsCvYTmCR5nV-xyjPjwLJw_o5E64y1wle9MNvi54M5Fyzj0nMsPG2kgTypsnoFyXADV49Wn1yXih2vqsB9lveQzWRx1miHz3N6btRgfMUu0_441KGehlC-XIvTzD7gt6NecCg/s1600/home_white.png' style='padding:0px;'/></a></li>
<li class='selected'><a href='#'>About Us</a></li>
<li><a class='trigger' href='#'>Contact Us</a>
<ul>
<li><a href='#'>Herdiansyah Blog</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li><a href='#'>Contact on Twitter</a></li>
<li class='hr'/>
<li><a href='#'>Free Template Design</a></li>
</ul>
</li>
<li><a href='#'>Moto GP</a></li>
<li><a href='#'>Football</a></li>
<li><a href='#'>Formula 1</a></li>
<li><a href='#'>Web Design</a></li>
<li><a href='#'>Free Template</a></li>
<li><a href='#'>Videos</a></li>
<li><a href='#'>Image</a></li>
<li><a href='#'>Download</a></li>
<li><a class='trigger' href='#'>More</a>
<ul>
<li><a href='#'>Editorial</a></li>
<li class='hr'/>
<li><a href='#'>Off Topic</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

Notes : change the code # with your link url address, and name labels with your label or categories.

News Ticker

First step, you have to register your blog to API Google Code and you will see your API code. After that, find this code below on your edit HTML tabs :

<script src='http://www.google.com/jsapi?key=ABQIAAAA4qkT5i26SQ6NmgJd5KQemhRQ_a6zv5_Bim3H_GL4gaueIFZ15xRdt8jcAUk8ZHokIVo-TBZgYVbkzw'/>

Notes : replace the blue code, with yourAPI Key.

Next step, you have to change your url link to make it news ticker appear with your latest post. Find this code below on edit HTML tabs.

<div class='newspic'>
<div class='news'>
<div style='float:left;padding:5px 60px 5px 0;font:bold 14px Arial;color:#333;text-transform:none;'>News Update :</div>
<div style='float:left;width:800px;padding:4px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
cssfeed.addFeed("News Update", "http://sportymagazine2.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div><div style='clear:both;'/>
</div>

Notes : replace the red code, with your site/blog url link.

Featured Slideshow Content

First step, add new html/java script widget on your page. Put this code below :

<div id='featured'>
<ul class='ui-tabs-nav'>


<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt="" src="#" /><span>Post Title</span></a></li>


<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt="" src="#" /><span>Post Title</span></a></li>


<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt="" src="#" /><span>Post Title</span></a></li>


<li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt="" src="#" /><span>Post Title</span></a></li>
</ul>


<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt="" src="#" />
<div class='info'>
<h2><a href=' your-url-link '>Post Title</a></h2>
</div></div>


<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt="" src="#" />
<div class='info'>
<h2><a href=' your-url-link '>Post Title</a></h2>
</div></div>


<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt="" src="#" />
<div class='info'>
<h2><a href=' your-url-link '>Post Title</a></h2>
</div></div>


<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt="" src="#" />
<div class='info'>
<h2><a href='your-url-link'>Post Title</a></h2>
</div></div>
</div>

Notes : replace red code (#) with your image url link, orange code (Post Title) with your post title, and blue code (your-url-link) with your url link post.

Featured Label Categories

First step, open your blog page and add new HTML/Java Script widget. Next step, put this code below :

Notes : Change orange code (3), with number of post will be appear, and red code (News) with your label or categories.

Twitter Widget (Live Updates)

Open your page elements and put this code below with add new HTML/Java Script.

<div style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnMVIX1xnp12WyGu2wwioaQs_uB0HtOZ8ncKPmUD0EoSwVZEGHtCFTO-0-t5-PSVFRp5RzHYrmFE08t53B2B-dYRBic7PsQj70qAElEayg8RMOVP-X8KYPQbPf5cgDLBp1Z2sdlZALNp0/s1600/bg_twitter.gif) no-repeat;padding-top:40px;padding-left:5px">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 3000,
width: 285,
height: 118,
theme: {
shell: {
background: 'transparent',
color: '#000000'
},
tweets: {
background: 'transparent',
color: '#000000',
links: '#B45F04'
}
},
features: {
scrollbar: true,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'default'
}
}).render().setUser('Free_download').start();
</script>
</div>

Notes : change orange code ( Free_download ) with your twitter username.

Search Widget

Open your page elements and put this code below with add new HTML/Java Script.

<form name="jksearch" action="http://www.google.com/search" method="get" onsubmit="jksitesearch(this)" target="_blank">

<input id="hiddenquery" type="hidden" name="q" />
<input name="qfront" onfocus="if(this.value==this.defaultValue)this.value='';" value="Search on this site..." type="text" onblur="if(this.value=='')this.value=this.defaultValue;" style="width: 240px;border:none;padding:8px 10px; font:normal 11px arial;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTOiJcO2SHzjlPyzf52lOtD1bVnW590SPDfoifqokvqf-ggmMdJTEWx0neoUQ_Gpb3fZtlmrBxHu5BdKUERvLyyW4ubl4ICMxogPOOeVbg58B0MwsB2NEhfQYc64s3BEO6KaW8tDkrfdg/s1600/search_field.jpg) no-repeat;" /><input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibyIOEy-7CntL8QsvO-xZb2QRK50G0_KIDwBOjWFGHaQhlsT56N7NsrCyO5MQAnLD9PriZlZBVdSsoXkxSrCfDfTKNqPl_yGZQ51N2TcKJNzqGPP4QkyiPlnwBNgBi0WsNfGPbgf2Iffc/s1600/search_button.jpg" align="top" value="Search"/>

<div style="font: normal 11px Arial;color:#666;padding:2px 0;">
<input name="se" type="radio" checked /> Google
<input name="se" type="radio" /> Yahoo
<input name="se" type="radio" /> Msn
</div>

<script type="text/javascript">

// All-in-one Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

//Enter domain of site to search.
var domainroot=" freedownloadtemplateblog.blogspot.com "

var searchaction=[ //form action for the 3 search engines
"http://www.google.com/search",
"http://search.yahoo.com/search",
"http://search.msn.com/results.aspx"
]

var queryfieldname=["q","p","q"] //name of hidden query form for the 3 search engines

function switchaction(cur, index){
cur.form.action=searchaction[index]
document.getElementById("hiddenquery").name=queryfieldname[index]
}
function jksitesearch(curobj){
for (i=0; i< document.jksearch.se.length; i++){ //loop through radio to see which is checked
if (document.jksearch.se[i].checked==true)
switchaction(document.jksearch.se[i], i)
}
document.getElementById("hiddenquery").value="site:"+domainroot+" "+curobj.qfront.value
}
</script>
</form>

Notes : change orange code ( freedownloadtemplateblog.blogspot.com ) with your twitter username.

Johny Jazzytube (Only for Youtube)

Posted In Blogger Template | 22.03 | No Comments be the first

$00.00

Template ini khusus untuk blog dengan konten video, dan itupun harus video dari Youtube. Template ini permintaan Antonio Rios dari Meksiko pada artikel Dua Template Gratis Untuk Pecinta Music dan Game.

Untuk menampilkan video Youtube ke dalam postingan, tentunya cari dulu video kesayangan Anda di Youtube. Setelah ketemu copy URL nya yang terletak di browser seperti gambar di bawah :

Atau anda juga bisa memperoleh URL ini dengan klik share di bagian bawah video, kemudian centang kotak kecil long link disampingnya, lalu copy URL pada kotak diatasnya, seperti gambar dibawah ini :

Setelah Anda copy URL Youtube tersebut, masuk ke new post posisikan pada Edit HTML (jangancompose), paste kemudian akhiri URL dengan kode endofvid (tanpa spasi). Untuk menambahkan teks pada postingan tersebut, awali dengan menggunakan kode [starttext] dan akhiri dengan kode [endtext]. Contoh akhir postingan seperti ini :

http://www.youtube.com/watch?v=K4Di2rvigVkendofvid

[starttext]
Your description here..........
[endtext]

Untuk menampilkan widget video per kategori, masuk ke layout >> add gadget pilih HTML/Javascriptkemudian masukkan kode di bawah ini kedalamnya :

<script style="text/javascript">
    var numposts = 3;
    var showpostthumbnails = true;
    var displaymore = true;
    var displayseparator = true;
    var showcommentnum = true;
    var showpostdate = true;
    var showpostsummary = true;
    var numchars = 70;
</script>
<script src="/feeds/posts/default/-/sting?orderby=published&alt=json-in-script&callback=showlabelpostswiththumbs"></script>

Ganti kode warna merah sting dengan label yang ingin anda tampilkan pada sidebar. Dan untuk mengaktifkan reply pada kotak komentar, masuk ke Edit HTML (centang Expand Widget Templates) cari blog ID 3009056898743314712 ganti dengan blog ID anda.

Bingung mau nulis apa lagi, udah segitu aja dulu ya. Oya ketiga template diatas ringan loading semua apalagi yang Jazzytube nggak sampe 70kb cuma sekitar 67kb kalau nggak salah. Jika anda berminat silahkan download ketiga template diatas gratis tanpa dipungut biaya, paling cuma biaya koneksi internet aja, selamat mencoba dan semoga bermanfaat.

Black Beauty Template

Posted In Blogger Template | 22.01 | No Comments be the first

$00.00

Johny Sompret

Posted In Blogger Template | 22.00 | No Comments be the first

$00.00

Blog Mild

Posted In 2 Columns | Blogger Template | Magazine | 21.38 | No Comments be the first

$00.00

Mas Paper Magazine 2 Blogger Template

Posted In Blogger Template | 06.05 | No Comments be the first

$00.00

Fitur :

Slider carousel dan featured slider otomatis
Multi level drop down menu.
Automatic widget per category
Pagination ready
Ads ready dan widget twitter
Dan masih banyak lagi

Slider

Menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript :

<div id='featured'><ul class="ui-tabs-nav"><script>document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");</script></ul><script>document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");</script></div>

Keterangan :

Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan.

Widget Label

Perhatikan layout template diatas, untuk kolom Your label here, Label 1, Label 2, Label 3 sampai denganLabel 6 Anda tinggal masukkan label pada kotak HTML/Javascript seperti contoh gambar di bawah ini :

Untuk contoh dari gambar diatas, label 3 Anda ganti dengan judul widget. entertainment silahkan diganti dengan label Anda sendiri. Perlu diingat besar kecil huruf harus sama dengan label yang sudah Anda buat sebelumnya.

Twitter Widget

Untuk membuat twitter widget masukkan kode di bawah ini pada kotak HTML/Javascript :

<div style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgioAItd-fXTI_rJVQqFj1i6AiAtbo2FwEsKE6NRk1CL2_am-mIeT-9qjhBzzZpqpU-a2mrAKp0H_P7XWwh3nqGgKBegY_-g6ugVCcEKwMz9Ems_RL-7xMFmFf8bzJ3V2ddmjx8PP6s7LU/s1600/tweet.png) no-repeat;padding-top:45px;padding-left:8px"><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 10,interval: 3000,width: 285,height: 123,theme: {shell: {background: 'transparent',color: '#000000'},tweets: {background: 'transparent',color: '#000000',links: '#135a9e'}},features: {scrollbar: false,loop: true,live: true,hashtags: true,timestamp: true,avatars: true,behavior: 'default'}}).render().setUser('Blog_ansyari').start();</script></div>

Ganti Blog_ansyari dengan twitter username anda.

Mohon maaf sebelumnya karena buru-buru soalnya disuruh bos ke bandara jemput tamu penting katanya. jika ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar. Sementara itu aja dulu, nanti malam disambung lagi.

Penting :

Isi semua Label 1 sampai dengan Label 6 dan usahakan dalam meletakkan label, pilih yang jumlahnyaminimal 5. Sehingga untuk blog yang baru dan belum memiliki banyak postingan, penataan widget akan tersusun ke bawah, jadi perbanyak postingan dan label terlebih dahulu sebelum mengajukan pertanyaan lainnya.

Pesan dari bang Johny :Mohon jangan dihilangkan atau diganti kredit link yang ada di bagian bawah sebelah kanan, kalau yang kiri ada tiga itu silahkan diganti dengan bloglist Anda nggak apa-apa